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

久しぶりに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を使う場合のコードです。

<!-- メニュー部分 -->
<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-twitter fa-2x"></i>Twitter</li>
                        <li><i class="fa fa-facebook fa-2x"></i>Facebook</li>
                        <li><i class="fa fa-instagram fa-2x"></i>Instagram</li>
                    </ul>
                </div><!-- /gn-scroller -->
            </nav>
    </li>
</ul>

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

コード:JavaScript

コピペで大丈夫です。

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

これで動くはずです。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup