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

マウスオーバーでプルダウンメニューを実装するグローバルナビゲーションは、jQueryライブラリを使うことによって設定できます。
レスポンシブ・デザイン対応のWebサイトが増えてきてグローバルナビゲーションの表現方法も沢山増えてきました。
マウスオーバーでプルダウンメニューを実装するグローバルナビゲーションjQueryプラグイン「doubletaptogo Plugin」の設定方法を解説します。

下記からJavaScriptライブラリのダウンロードを行ってください。
jqueryライブラリダウンロード
doubletaptogo.jsダウンロード

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

<div id="nav_inner">
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="/" aria-haspopup="true">お知らせ</a></li>
<li>
<a href="/" aria-haspopup="true"><span>事業内容</span></a>
<ul>
<li><a href="/">事業内容01</a></li>
<li><a href="/">事業内容02</a></li>
<li><a href="/">事業内容03</a></li>
<li><a href="/">事業内容04</a></li>
</ul>
</li>
<li><a href="/" aria-haspopup="true">制作実績</a></li>
<li><a href="/" aria-haspopup="true">ブログ</a></li>
<li><a href="/" aria-haspopup="true"><span>会社案内</span></a>
<ul>
<li><a href="/">経営理念</a></li>
<li><a href="/">代表挨拶</a></li>
<li><a href="/">沿革</a></li>
<li><a href="/">アクセス</a></li>
</ul>
</li>
<li><a href="/" aria-haspopup="true">お問い合わせ</a></li>
</ul>
</nav>
</div>

#nav_inner{
	float: left;
	width:100%;
	margin:10px 0 0 0;
	background-color:#5cb181;
}
#nav{
	width:1020px;
	margin:auto;
}
#nav > a{
	display: none;
}
#nav li{
	position: relative;
	z-index:3;
}
#nav li a{
	color:#fff;
	display: block;
	text-decoration:none;
}
#nav li a:active{
	background-color: #e6e6e6 !important;
}
#nav span:after{
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #d1d1d1;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
}
/* first level */
#nav > ul{
	height: 3;
	background-color: #5cb181;
}
#nav > ul > li{
	width: 16.66%;
	height: 100%;
	float: left;
}
#nav > ul > li > a{
	height: 100%;
	font-size:110%;
	color:#FFFFFF;
	line-height:3.5;
	text-align: center;
	margin:4px 0 0 0;
	border-bottom:4px solid #5cb181;
}
#nav > ul > li > a.active{
	border-bottom:4px solid #063;
}
#nav ul li:first-child{
	border-left: 1px dotted #9accb0;}
#nav > ul > li > a{
	border-right: 1px dotted #9accb0;}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	color:#fff;
	background-color: #5cb181;
}
/* second level */
#nav li ul{
	background-color: #5cb181;
	display: none;
	position: absolute;
	top: 100%;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	font-size:100%;
	color:#fff;
	border-top: 1px solid #7ac39a;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a{
	background-color: #4ba271;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */{
#nav
{
	width: 100%;
	position: static;
	margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */{
html{
	font-size: 75%; /* 12 */
}
#nav{
	position: relative;
	top: auto;
	left: auto;
}
#nav > a{
	width: 3.125em; /* 50 */
	height: 3.125em; /* 50 */
	text-align: left;
	text-indent: -9999px;
	background-color: #369660;
	position: relative;
}
#nav > a:before,
#nav > a:after{
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
}
#nav > a:after{
	top: 60%;
}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type{
	display: block;
}

/* first level */
#nav > ul{
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}
#nav:target > ul{
	display: block;
}
#nav > ul > li{
	width: 100%;
	float: none;
}
#nav > ul > li > a{
	height: auto;
	color:#fff;
	text-align: left;
	padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a{
	border-right: none;
	border-bottom: 1px solid #d3d3d3;
}

/* second level */
#nav li ul{
	position: static;
	padding: 1.25em; /* 20 */
	padding-top: 0;
}
}

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

<meta charset="UTF-8">
<title>マウスオーバーで吹き出しが出るレスポンシブグローバルナビゲーション jQuery「animenu.js」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="ドロップダウンでメニューを表示するレスポンシブグローバルメニュー jQuery「doubletaptogo.js」のご紹介を致します。">
<meta name="keywords" content="doubletaptogo,ドロップダウン,グローバルメニュー,レスポンシブ">
<meta name="robots" content="all">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/sample/016/base.css" media="all" />
<!--グローバルナビ-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/sample/016/doubletaptogo.js"></script>
<script>
	$( function()
	{
		$( '#nav li:has(ul)' ).doubleTapToGo();
	});
</script>
<script type="text/javascript">
$(function(){
$('#nav li a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
</script><

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

以上で設定完了となりますが、簡単に設定ができますね。
グローバルナビゲーションの表現方法が沢山あるますが、一番シンプルなナビゲーションになります。 マウスオーバーアクションとしては基本となるグローバルナビゲーションなので覚えておくと良いでしょう。