無料でビットコインをもらえるのは、ビットフライヤー

[み]jQueryでかっこよくて使いやすいスライドメニューを実装する | Google Nexus Website Menu

jquery

久しぶりにWebサイトを作るとき用のメモです。

最近は、PCのみのサイトなんてほぼほぼなくて、スマートフォン対応が必須ですね。まぁ、スマートフォン対応というよりは、スマートフォンがメインですかね。

かっこよくて使いやすいスライドメニュー「Google Nexus Website Menu」

Google Nexus Website Menu
Google Nexus Website Menu
この「Google Nexus Website Menu」というのは、Nexus7に使われていたものをベースにしているとかなんとか。

PCの場合は、ハンバーガーメニューにマウスオーバーでアイコンがズラズラっとでてきて、クリックするかアイコンにマウスオーバーでメニューが表示されます。

「Google Nexus Website Menu」を実装

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

コード:HTML

コピペで大丈夫です。今回のは、Font Awesomeを使う場合のコードです。
[cc lang=”html”]

  • Menu

[/cc] あとは、「component.css」「classie.js」「gnmenu.js」の3つをどっかに記述してください。もちろん、jQueryを読み込むのも忘れずに。

コード:JavaScript

コピペで大丈夫です。
[cc lang=”JavaScript”] new gnMenu( document.getElementById( ‘gn-menu’ ) );
[/cc]

これで動くはずです。

コメントを残す

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