おしゃれな動きをするスライドグローバルメニュー jQuery「gnmenu.js」
07.09.17 01:09 | コメント(0)
おしゃれな動きをするスライドグローバルメニューJavaScript
レスポンシブサイトで対応する場合、グローバルメニューはレスポンシブ用にグローバルメニューを表示します。
いくつかあるハンバーガーメニューの中でもおしゃれな動きをするグローバルメニュー「gnmenu」jQueryがあります。
今回はハンバーガーメニューのおしゃれな動きをするスライドグローバルメニュー、尚且つレスポンシブに対応している「gnmenu」jQueryの作成方法をご紹介したいと思います。
サンプルページ

1. 「jQuery」プラグインをダウンロード
2. ヘッダーの記載
3. フッターの記載
「jQuery」プラグインをダウンロード
gnmenuファイル一式ダウンロード
ヘッダーの記載
【ヘッダーに記述】
<head> <meta charset="UTF-8"> <title>左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」|WEBデザイナー 【キングサイト】</title> <meta name="description" content="左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」のご紹介を致します。"> <meta name="keywords" content="レスポンシブ,ハンバーガーメニュー,drawer.js,drawer,右から出るメニュー,左から出るメニュー,jQuery"> <meta name="robots" content="all"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/sample/028/base.css" media="all" /> <link rel="stylesheet" href="/sample/028/font.css" media="all" /> <link rel="stylesheet" href="/sample/028/component.css" media="all" /> </head>
フッターの記載
【フッターに記述】
<!--グローバル--> <script src="/sample/028/gnmenu.js"></script> <script src="/sample/028/classie.js"></script> <script> new gnMenu( document.getElementById( 'gn-menu' ) ); </script>
以上でおしゃれな動きをするスライドグローバルメニュー jQuery「gnmenu.js」を設置する方法になります。
コメントする
おすすめの記事
自作パソコンの組み立て方法②(パソコンを組み立てる方法)
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
自作パソコンの組み立てについて 自作でパソコンを組み立てる方もいますが、まだ組み...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して情報を表示させる方法
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
ユーザー情報の内容をWebサイトへ表示させる方法 WordPress(ワードプレ...
WordPress(ワードプレス)でユーザー情報を取得する関数コードを利用して管理画面プロフィールを編集する方法
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
管理画面プロフィールを編集する方法 WordPress(ワードプレス)管理画面で...
WordPress(ワードプレス)で投稿記事内の最初の画像を表示させる方法
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
投稿記事内の最初の画像を表示させる方法 WordPress(ワードプレス)を利用...
WordPress(ワードプレス)権限グループ別(管理者、編集者、投稿者、寄稿者、購読者)のLevelと所有権限
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
管理者、編集者、投稿者、寄稿者、購読者のLevelと所有権限 WordPress...
WordPress(ワードプレス)管理画面記事投稿画面の内容を固定で「表示・非表示」する設定方法
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
管理画面記事投稿画面の内容を「表示・非表示」する設定方法 WordPress(ワ...
Facebookでコメントする