jQuery

レスポンシブに対応した水平スライドアウトメニューの実装方法

slide-out-menu

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。
こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。
また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。
僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。
色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。
下記にデモサイトもありますので、ご参考にどうぞ

デモサイト

実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。

HORIZONTAL SLIDE OUT MENU

レスポンシブに対応したスライドアウトメニューの実装方法

それでは、スライドメニューの実装をしていきたいと思います。
実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、head内にダウンロードした【component.css】【cbpHorizontalSlideOutMenu.min.js】【modernizr.custom】を読み込みます。
ファイルの階層は、ご自身のに合わせて下さい。

<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/cbpHorizontalSlideOutMenu.min.js"></script>
<script src="js/modernizr.custom.js"></script>

HTML

次にスライドメニュー部分のHTMLを記載していきます。

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
	<div class="cbp-hsinner">
		<ul class="cbp-hsmenu">
			<li>
				<a href="#">MENU【1】</a>
				<ul class="cbp-hssubmenu">
					<li><a href="#"><img alt="img01" src="images/1.png"><span>menu-1-1</span></a></li>
					<li><a href="#"><img alt="img02" src="images/2.png"><span>menu-1-2</span></a></li>
					<li><a href="#"><img alt="img03" src="images/3.png"><span>menu-1-3</span></a></li>
					<li><a href="#"><img alt="img04" src="images/4.png"><span>menu-1-4</span></a></li>
					<li><a href="#"><img alt="img05" src="images/5.png"><span>menu-1-5</span></a></li>
					<li><a href="#"><img alt="img06" src="images/6.png"><span>menu-1-6</span></a></li>
				</ul>
			</li>
			<li>
				<a href="#">MENU【2】</a>
				<ul class="cbp-hssubmenu cbp-hssub-rows">
					<li><a href="#"><img alt="img07" src="images/7.png"><span>menu-2-1</span></a></li>
					<li><a href="#"><img alt="img08" src="images/8.png"><span>menu-2-2</span></a></li>
					<li><a href="#"><img alt="img09" src="images/9.png"><span>menu-2-3</span></a></li>
					<li><a href="#"><img alt="img10" src="images/10.png"><span>menu-2-4</span></a></li>
					<li><a href="#"><img alt="img01" src="images/1.png"><span>menu-2-5</span></a></li>
					<li><a href="#"><img alt="img02" src="images/2.png"><span>menu-2-6</span></a></li>
					<li><a href="#"><img alt="img03" src="images/3.png"><span>menu-2-7</span></a></li>
					<li><a href="#"><img alt="img04" src="images/4.png"><span>menu-2-8</span></a></li>
					<li><a href="#"><img alt="img05" src="images/5.png"><span>menu-2-9</span></a></li>
					<li><a href="#"><img alt="img06" src="images/6.png"><span>menu-2-10</span></a></li>
					<li><a href="#"><img alt="img01" src="images/1.png"><span>menu-2-11</span></a></li>
					<li><a href="#"><img alt="img02" src="images/2.png"><span>menu-2-12</span></a></li>
				</ul>
			</li>
			<li>
				<a href="#">MENU【3】</a>
				<ul class="cbp-hssubmenu">
					<li><a href="#"><img alt="img10" src="images/10.png"><span>menu-3-1</span></a></li>
					<li><a href="#"><img alt="img06" src="images/6.png"><span>menu-3-2</span></a></li>
					<li><a href="#"><img alt="img09" src="images/9.png"><span>menu-3-3</span></a></li>
				</ul>
			</li>
		</ul>
	</div>
</nav>

スクリプト

最後にスクリプトを記載します。

<script>
	var menu = new cbpHorizontalSlideOutMenu( document.getElementById( 'cbp-hsmenu-wrapper' ) );
</script>

上記まで記載すれば、実装の完了です。
component.cssをカスタマイズすれば、オリジナルのスライドメニューも出来ると思います。
実際にデモサイトで使用してみた感想ですが、実装も簡単ですしcomponent.cssを読み込むとメディアクエリなどでレスポンシブに対応していますので、物凄く使いやすい印象を受けました。
また、メニューのカスタマイズも簡単にcomponent.cssをいじるだけで、ある程度はオリジナルのスライドメニューが出来ると思います。
でも、やはり僕的にレスポンシブに対応していることが、一番良かったかなと思います。
サイトをレスポンシブにする時って、ブレイク後のメニューって悩むんですよねwww僕だけかもしれませんが・・・
とりあえず、僕の中ではレスポンシブのメニューとしてこのスライドメニューをストックしとこうかなと思います。
下記に頑張って作ったデモサイトもありますので、ご参考下さい。

デモサイト

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

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

About

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

関連記事

コメント

コメントをどうぞ

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

PREVIOUS large_3358544222

僕がハマっているオススメ作業用BGMのご紹介

NEXT rss-thumbnail

WordPressのRSSに記事のアイキャッチ画像も表示する(抜粋表示方法も)