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

ホームページをつくるときに最初にどんなグローバルナビゲーションにするか考えます。
グローバルナビゲーションの見せ方はかなり沢山方法がありますが、今はWebサイトがモバイルフレンドリー対応していないと、検索順位に大きく影響してきます。

レスポンシブ・デザイン対応のトグルマークを表示したグローバルナビゲーションは、JavaScriptで設定することによって実装できます。

トグルマークで表示するレスポンシブ対応グローバルナビゲーション「JavaScript」の設定方法を解説します。

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

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

<nav class="mod_nav">
<p class="navtitle">MENU</p>
<ul>
<li><a href="/sample/008/">ホーム</a></li>
<li><a href="/sample/008/">メニュー1</a></li>
<li><a href="/sample/008/">メニュー2</a></li>
<li><a href="/sample/008/">メニュー3</a></li>
<li><a href="/sample/008/">メニュー4</a></li>
<li><a href="/sample/008/">メニュー5</a></li>
</ul>
</nav>

/* mod_nav
-----------------------------------------*/
nav	{
	float: left;
	width: 100%;
	margin:20px 0 20px 0;
}
.mod_nav{
	height:45px;
	background-color:#f8689e;
}
.mod_nav p.navtitle{
	display:none;
}
.mod_nav ul{
	margin:0 auto;
	width:880px;
}
.mod_nav ul li{
	float:left;
	line-height:45px;
	text-align:center;
	padding:0 20px 0 20px;
}

.mod_nav ul li a{
	display:block;
	color:#FFF;
}
.mod_nav ul li.current a{
	font-weight:bold;
}
.mod_nav ul li a:link    {color:#FFF; text-decoration:none;}
.mod_nav ul li a:visited {color:#FFF; text-decoration:none;}
.mod_nav ul li a:hover   {color:#FFF; text-decoration:none; background-color:#fca6c6;}
.mod_nav ul li a:active  {color:#FFF; text-decoration:none; background-color:#fca6c6;}

@media screen and (max-width:600px){
nav	{
	float: left;
	width: 100%;
	margin-bottom:0px;
}
.mod_nav{height:auto;}
.mod_nav p.navtitle{
	cursor:pointer;
	display:block;
	line-height:45px;
	color:#FFF;
	padding:0 0 0 50px;
	font-size:110%;
	font-weight:bold;
	background:transparent url('/sample/008/img/bg_menu.jpg') no-repeat 9px 9px;
}
.mod_nav ul{width:100%; display:none;}
.mod_nav ul li{float:none;}
.mod_nav ul li{
	width:99%;
	padding:0 0% 0 1%;
	text-align:left;
	background-color:#fa88b3;
	border-bottom:solid 1px #f56b9f;
}
.mod_nav ul li a{}

}

$(function(){

	var agent = navigator.userAgent;
	var list = $(".mod_nav ul"); 
	
	function menuslide(){
	//メニュー表示非表示
	$(".mod_nav p.navtitle").click(function(){
	if($(list).css("display")=="none"){
	$(list).slideDown("fast");
	}else{
	$(list).slideUp("fast");
	}
	});
	}

	if(agent.search(/iPhone/) != -1){
		menuslide();
	
	}else if(agent.search(/Android/) != -1){
		menuslide();
	
	}else{
//resize
	$(window).resize(function(){
	var w = $(window).width();
	var x = 600;
		if (w <= x) {
		$(list).css("display","none");
		} else {
		$(list).css("display","block");
		}
	});
		menuslide();
	}
});

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

<meta charset="UTF-8">
<title>トグルマークで表示するレスポンシブ対応グローバルナビゲーション「JavaScript」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="jQueryを使ったレスポンシブなグローバルメニューのご紹介を致します。">
<meta name="keywords" content="スクロール,ホームページ作成方法,jquery.quickflip.source.js,スクリプト,右下にBOX">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/008/base.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/sample/008/tool.js"></script>

実装サンプルを作りましたのでこちらでも確認してみてください。
グローバルナビゲーション デモ

以上で設定完了となりますが、簡単に設定ができますね。
スマートフォンユーザーが増えてきているのでモバイルフレンドリーは必ず意識したいですね。
スマートフォン対応が出来ていないWebサイトと対応が出来ているWebサイトではSEOの効果は変わってきます。
デバイスごとにユーザーがストレスないグローバルナビゲーションをつくりことが良いですね。