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

はやち

2012.09.21

どうも、はやちです_(: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">メニュー１</a></li>
        <li><a href="#tab2">メニュー２</a></li>
        <li><a href="#tab3">メニュー３</a></li>
      </ul>
      <div id="tab1" class="tab_content">
        <p><a href="#tab1">メニュー１</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

こちらのTabs Widgetを使用しております。
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」∠)_))))ｿﾜｿﾜ

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやちフロントエンドエンジニア / 林佳代子

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

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

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む