Snaplog

【jQuery】おしゃれな動きで使いやすいスライドメニュー-Google Nexus Website Menuの使い方-

Google Nexus Website Menuというスライドメニュー？ドロワーメニュー？を使ってみました。

Nexus7のサイトに使われていた動きらしく、このような名前になっています。

今はこの動きは使われていないようです。

デモサイト

PCではマウスオーバーでアイコンがでてきて、
クリックか、さらにアイコンをマウスオーバーするとメニューが表示されます。

ダウンロード

以下サイトのDownload souseボタンからファイル一式をダウンロードします。

Google Nexus Website Menu

読み込み

Zipファイルを解凍し、「component.css」と「classie.js」「gnmenu.js」を読み込みます。

HTML

HTMLは以下のメニュー部分を追加します。

<ul id="gn-menu" class="gn-menu-main">
	<li class="gn-trigger">
		<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
			<nav class="gn-menu-wrapper">
				<div class="gn-scroller">
					<ul class="gn-menu">
                                        <!-- ここにメニュー -->
						<li><i class="fa fa-facebook fa-2x"></i>テスト</li>
						<li><i class="fa fa-twitter fa-2x"></i>テスト</li>
						<li><i class="fa fa-instagram fa-2x"></i>テスト</li>
					</ul>
				</div><!-- /gn-scroller -->
			</nav>
	</li>
</ul>

アイコンは、今回はFont Awesomeを使っています。

JavaScript

jsファイルに以下の記述を追加します。

new gnMenu( document.getElementById( 'gn-menu' ) );

これで動くはずです。

CSSについては特にありません。

自分好みにCSSをいじってください。

簡単に紹介ですが、こんな感じでちょっとおしゃれなメニューを実装できます。

記事一覧へ

Pocket