おしゃれな動きをするスライドグローバルメニュー jQuery「gnmenu.js」

HOME > WEB屋の知識と技術ブログ > WEB屋になる為の知識と技術 > おしゃれな動きをするスライドグローバルメニュー jQuery「gnmenu.js」

おしゃれな動きをするスライドグローバルメニューJavaScript

レスポンシブサイトが多くなって来ましたが、グローバルメニューは色々な方法があります。
レスポンシブサイトで対応する場合、グローバルメニューはレスポンシブ用にグローバルメニューを表示します。

いくつかあるハンバーガーメニューの中でもおしゃれな動きをするグローバルメニュー「gnmenu」jQueryがあります。
今回はハンバーガーメニューのおしゃれな動きをするスライドグローバルメニュー、尚且つレスポンシブに対応している「gnmenu」jQueryの作成方法をご紹介したいと思います。

サンプルページ

サンプルページはこちら

　1. 「jQuery」プラグインをダウンロード
　2. ヘッダーの記載
　3. フッターの記載

「jQuery」プラグインをダウンロード

▼「gnmenu.js」「component.css」「classie.js」ファイル一式
gnmenuファイル一式ダウンロード

ヘッダーの記載

まず最初に「component.css」ファイルを読み込む「css」ファイルへの読み込みコードをヘッダーへ記載しましょう。

【ヘッダーに記述】

<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>

フッターの記載

まず最初に「gnmenu.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをフッターへ記載しましょう。

【フッターに記述】

<!--グローバル-->
<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」を設置する方法になります。

カテゴリ：WEB屋になる為の心得, WEB屋になる為の知識と技術, 使えるjQueryとJavaScript