jQuery

プラグインは使わずスマホのメニューに実装 jQuery 水平スライドメニュー

slide-menu

今回は、プラグインを使わずスマホのメニューなどにも実装できる【jQuery 水平スライドメニュー】のご紹介です。
実装は、とても簡単でシンプルなので、利便性も良いかと思います。
PC用のメニューだけではなく、スマホサイトのメニューとしても利用できるのではないでしょうか。
下記にデモサイトも用意していますので、ご参考頂ければと思います。

デモサイト

jQuery 水平スライドメニュー実装方法

それでは、実装方法をご説明していきます。

jQuery本体の読み込み

まずは、jQuery本体をhead内に読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

スクリプトの記載

jQuery本体を読み込んだら、下記コードをコピーして</body>の手前などに貼り付けて下さい。

<script>
$(document).ready(function () {
    $('.slideout-menu-toggle').on('click', function(event){
    	event.preventDefault();

    	var slideoutMenu = $('.slideout-menu');
    	var slideoutMenuWidth = $('.slideout-menu').width();
    	
    	slideoutMenu.toggleClass("open");
    	
    	if (slideoutMenu.hasClass("open")) {
	    	slideoutMenu.animate({
		    	left: "0px"
	    	});	
    	} else {
	    	slideoutMenu.animate({
		    	left: -slideoutMenuWidth
	    	}, 250);	
    	}
    });
});
</script>

HTML

それでは、次にスライドメニューとメニューのトグルのHTMLを準備をします。
下記コードをコピーして貼り付けて下さい。

<div class="slideout-menu">
	<h3>Slide Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">jQuery</a></li>
		<li><a href="#">WordPress</a></li>
	</ul>
</div>
	<a href="#" class="slideout-menu-toggle"><i class="icon-menu"></i>Menu Open</a>

CSS

最後にCSSでスライドメニューの装飾などスタイルを形成していきます。
スライドメニューのスタイルは、ご自身サイトなどに合うスタイルに変更して下さい。

/*---------------------------------------------------------
  					slide menu
---------------------------------------------------------*/
.slideout-menu {
	position: fixed;
	top: 0;
	left: -250px;
	width: 250px;
	height: 100%;
	background: #333;
	z-index: 100;
}
.slideout-menu h3 {
	position: relative;
	padding: 12px 10px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
	border-bottom: 4px solid #222;
}
.slideout-menu .slideout-menu-toggle {
	position: absolute;
	top: 12px;
	right: 10px;
	display: inline-block;
	padding: 6px 9px 5px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	background: #222;
	color: #999;
	text-decoration: none;
	vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
	color: #fff;
}
.slideout-menu ul {
	list-style: none;
	font-weight: 300;
	border-top: 1px solid #151515;
	border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
	border-top: 1px solid #454545;
	border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
	display: block;
	padding: 10px;
	color: #999;
	text-decoration: none;
}
.slideout-menu ul li a:hover {
	background: #000;
	color: #fff;
}

上記まで完了すれば、jQuery 水平スライドメニューの実装完了となります。
下記にデモサイトもありますのでご参考下さい。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS kraken

ブログ記事の画像をアップロードする前に画像を圧縮してサイトスピードを向上させよう

NEXT rt

HTMLのtable(テーブル)要素をレスポンシブにする