Webデザイナーブログから学ぶホームページ制作

レスポンシブ・デザインに対応しているグローバルナビゲーションは色々な形や動きをするものがありますが、クリックアクションでお洒落な動きをするナビゲーションの見せ方も沢山あります。

レスポンシブ・デザインに対応しているグローバルナビゲーションに動きを実装するには、jQueryライブラリを使うことによって設定できます。

レスポンシブ・デザインに対応しているお洒落な動きをするグローバルナビゲーションを実装するカルーセルスライダーjQueryプラグイン「drawer menu Plugin」の設定方法を解説します。

下記からJavaScriptライブラリ「gnmenu.js」「component.css」「classie.js」ファイルのダウンロードを行ってください。
jqueryライブラリダウンロード
gnmenu Pluginダウンロード

html、cssファイルを作成します。

<!-- header -->
<header role="banner">
<nav>
<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 class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><i class="fa fa-search gn-icon"></i><span>検索</span></a>
</li>
<li><a href=""><i class="fa fa-file-text-o gn-icon"></i>社員名簿</a></li>
<li><a href=""><i class="fa fa-file-o gn-icon"></i>営業報告</a></li>
<li><a href=""><i class="fa fa-folder-open-o gn-icon"></i>案件管理</a></li>
<li><a href=""><i class="fa fa-user gn-icon"></i>社員週報</a></li>
<li><a href=""><i class="fa fa-phone gn-icon"></i>緊急連絡先</a></li>
</ul>
</div>
</nav>
</li>
</ul>
</nav>
</header>
<!-- /header -->

「css」「JavaScript」ファイルへのディレクトリをメタタグと/bodyの前に記述します。

※メタタグ内に記述。

<meta charset="UTF-8">
<title>レスポンシブ・デザインに対応しているお洒落な動きをするグローバルナビゲーション jQuery「gnmenu」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="おしゃれな動きをするスライドグローバルメニュー jQuery「gnmenu.js」のご紹介を致します。">
<meta name="keywords" content="レスポンシブ,ハンバーガーメニュー,スライド,gnmenu,右から出るメニュー,左から出るメニュー,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" />

※/bodyの前に記述。

<!--グローバル-->
<script src="/sample/028/gnmenu.js"></script>
<script src="/sample/028/classie.js"></script>

実装サンプルを作りましたのでこちらでも確認してみてください。
gnmenu Plugin デモ

以上で設定完了となりますが、簡単に設定ができますね。
クリックアクションがスムーズなのでサイトのパフォーマンスが軽く見えるのも特徴です。 業務システムやWebサイトの管理画面等で利用されることも多いグローバルナビゲーションですので業務系のUIデザインを行うときは最適ですね。