スマホサイトに入れると使いやすくなる!おすすめjQuery4選!


スマホサイトに入れると使いやすくなる!おすすめjQuery4選!

どうも、はやちです_(:3」∠)_

スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。

アコーディオン

アコーディオンみたく開閉式のメニューが実装できるjsです。
記事の多いコンテンツをまとめるのに便利ですね。

動きをみる

HTML

<dl class="acordion">
	<dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt>
	<dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd>
	<dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd>
	<dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

CSS

/*アコーディオン
-------------------------------------*/
.acordion{
 background:#fff;
 box-shadow: 0 0 10px rgba(0,0,0,0.3);
 border-radius:5px;
}

.trigger{
	padding:10px 10px 10px 15px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e5e5e5), color-stop(0.00, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	background: linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	border-radius:5px;
	font-size:88%;
}

.trigger.active{
	border-radius:5px 5px 0 0;
	border-bottom:1px solid #cfcfcf;
}

.acordion_tree{
	padding:15px;
	font-size:75%;
}

.open-close {
	float:right;
	text-indent:-9999px;
	display:block;
	margin-top:3px;
	height:11px;
	width:20px;
	background:url(../images/open.png) no-repeat;
	-webkit-background-size:20px 11px;
}

.trigger.active .open-close{
	background:url(../images/close.png) no-repeat;
	-webkit-background-size:20px 11px;
}

JavaScript

$(document).ready(function(){
  //acordion_treeを一旦非表示に
  $(".acordion_tree").css("display","none");
  //triggerをクリックすると以下を実行
  $(".trigger").click(function(){
    //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら
    if($("+.acordion_tree",this).css("display")=="none"){
         //classにactiveを追加
         $(this).addClass("active");
         //直後のacordion_treeをスライドダウン
         $("+.acordion_tree",this).slideDown("normal");
  }else{
    //classからactiveを削除
    $(this).removeClass("active");
    //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ
    $("+.acordion_tree",this).slideUp("normal");
  }
  });
});

タブ

こちらも記事の多いコンテンツをまとめるのに便利ですが、タブメニューに文字を入れるのに限りがありますね(´∵`)

動きをみる

HTML

<div id="ui-tab">
      <ul class="tab_menu">
        <li><a href="#tab1">メニュー1</a></li>
        <li><a href="#tab2">メニュー2</a></li>
        <li><a href="#tab3">メニュー3</a></li>
      </ul>
      <div id="tab1" class="tab_content">
        <p><a href="#tab1">メニュー1</a>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <!--/tab1-->
      <div id="tab2" class="tab_content">
        <p><a href="#tab1">メニュー2</a>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <!--/tab1-->
      <div id="tab3" class="tab_content">
        <p><a href="#tab1">メニュー3</a>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <!--/tab1-->
</div>
<!--ul-tab-->

CSS

.tab_menu li {
	float:left;
	margin-right:10px;
	border-radius:5px 5px 0 0;
	box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
}

.tab_menu li a{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #e5e5e5), color-stop(0.00, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 95%);
	background: linear-gradient(top, #ffffff 0%, #e5e5e5 95%);
	font-size:88%;
	display:block;
	padding:10px;
	border-radius:5px 5px 0 0;
}

.tab_content{
	clear:both;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	border-top:1px solid #cfcfcf;
	padding:15px;
}

セレクトされているボタンは付属のui.tab.cssを調整します。

JavaScript

こちらのui.tabs.jsを使用しております。
ui.tabs.jsとcore.jsを読みこんでこちらのスクリプトを記述します。

<script type="text/javascript">// <![CDATA[
	$(function() {
		$('#ui-tab > ul').tabs();
	});
// ]]></script>

スライダー

トップに画像イメージをスライド式で見せるデザイン。
レスポンシブサイトにも対応しているのでオススメのスライダーです。

動きをみる

HTML

<div class="flexslider">
<ul id="slider" class="nivoSlider">
	<li><img src="images/jay.png" alt="" /></li>
	<li><img src="images/jay2.png" alt="" /></li>
	<li><img src="images/jay3.png" alt="" /></li>
	<li><img src="images/jay4.png" alt="" /></li>
</ul>
</div>
<!--/flexslider-->

JavaScript

こちらのjquery.nivo.slider.jsを使用しております。
jquery.nivo.slider.jsを読み込んで、下記のjavascriptを記述します。

<script type="text/javascript">// <![CDATA[
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
// ]]></script>

CSS

付属のnivo-slider.cssを調整します。

/* 矢印部分 */
.nivo-directionNav a {
	position:absolute;
	top:40%;
	z-index:9;
	display:block;
	text-indent:-9999px;
	cursor:pointer;
	width:35px;
	height:35px;
}
.nivo-prevNav {
	left:0px;
	background:url(../images/prev.png) no-repeat;
	-webkit-background-size:35px 35px;
}
.nivo-nextNav {
	right:0px;
	background:url(../images/next.png) no-repeat;
	-webkit-background-size:35px 35px;
}
/* ページネーション部分 */
.nivo-controlNav {
	text-align:center;
	padding:5px 0;
}
.nivo-controlNav a {
	cursor:pointer;
	text-indent:-9999px;
	width:25px;
	height:25px;
	background:url(../images/navi_off.png) no-repeat;
	-webkit-background-size:25px 25px;
	display:inline-block;
}
.nivo-controlNav a.active {
	width:25px;
	height:25px;
	background:url(../images/navi_on.png) no-repeat;
}

サイドバー

FacebookやPixivなどで使われているメニューの動きが実装できます。
こちらもレスポンシブに対応しているjqueryです。
サイドからガラッと飛び出る感じがなんか気持ちいですね_(:3」∠)_

動きをみる

HTML

<header class="header">
    <h1><a href="#"><img src="images/logo.png" width="74" alt="LIG"></a></h1>
    <a href="#modal" class="second open"><span><img src="images/side_icon.png" width="20"></span></a></header>
  <div id="modal">
    <h2>Sidebar</h2>
    <ul>
      <li><a href="#">content1</a></li>
      <li><a href="#">content2</a></li>
      <li><a href="#">content3</a></li>
      <li><a href="#">content4</a></li>
      <li><a href="#">content5</a></li>
    </ul>
    <p class="close"><a href="javascript:$.pageslide.close()">Close</a></p>
  </div>
  <!--/modal-->

JavaScript

JavascriptはPageSlideを使用しました。
headにjquery.pageslide.min.jsを読み込んでメニューより下に下記のJavascriptを記述します。
私は今回閉じbodyタグの後に記述しました。

<script type="text/javascript">// <![CDATA[
	/* Default pageslide, moves to the right */
	$(".first").pageslide();

	/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
	$(".second").pageslide({ direction: "left", modal: true });
// ]]></script>
/*サイドバー
---------------------------------------------------------------*/

#modal { display: none; }

#modal h2{
	font-size:18px;
	border-bottom:1px solid #fff;
}

#modal h2,
#modal ul li a{
	padding:10px 0;
}

#modal ul{
	margin-bottom:20px;
}

#modal ul li a{
	border-bottom:1px dashed #6f6f6f;
	display:block;
	color:#fff;
}

.close{
	font-weight:bold;
}

.close a{
	color:#000;
	padding:3px 10px;
	background:#ccc;
}

.open{
	display:block;
	padding:7px;
	float:right;
	margin-top:5px;	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e5e5e5), color-stop(0.00, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	background: linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	-webkit-background-size:20px 20px;
	border-radius:3px;
	border:1px solid #e0e0e0;
}

.open img{
	vertical-align:middle;
}

サイドバーのcssは付属のjquery.pageslide.cssで調整します。

#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;

    /* Specify the width of your pageslide here */
    width: 260px;
    padding: 20px;

    /* These styles are optional, and describe how the pageslide will look */
    background-color: #333;
    color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
}

JSを入れるとぐんっと使いやすくなりますし、デザインの幅も広がりますね
ほかにスマホに使えそうなjQueryないかな((((_(:3」∠)_))))ソワソワ

この記事を書いた人

はやち
はやち フロントエンドエンジニア 2010年入社
フロントエンドエンジニアのはやちです( ˘ω˘)☝
以前までは顔隠しておりましたが思い切ることにしました…。
相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌
今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

こちらもおすすめ

jQuery標準デザイン講座

jQuery標準デザイン講座

  • 著者神田 幸恵
  • 価格¥ 2,678(2015/11/10 15:57時点)
  • 出版日2015/12/16
  • 商品ランキング104,883位
  • 大型本320ページ
  • ISBN-104798136220
  • ISBN-139784798136226
  • 出版社翔泳社