*

メニューをプルダウンする方法。globalNaviを使用。

公開日: : css3, html5, jquery, 未分類

今回は、メニューをプルダウンさせる方法について調べてみました。

メニューをたくさんあると、ヘッダー内に収まりきらないということがあると思います。

そんなときは、このプルダウンメニューを使用するととても便利です。

まずは、デモを用意しましたので、見てください。
デモ01

このようにプルダウンがあれば、メニューが多いサイトもコンパクトにページ表示ができます。

以下にソースを記載します。

今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
custom.js
以上の1つを使用します。

scriptは、htmlに直接書いてもいいのですが、
今回は、別ファイルにしました。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>プルダウンのナビゲーション</title>
<meta charset="UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
                     <ul id="globalNavi">
                         <li class="first"><a href="index.html">メニュー1</a>
	                     <ul>
                             <li><a href="index.html">メニュー1-1</a></li>
                             <li><a href="index.html">メニュー1-2</a></li>
                             <li><a href="index.html">メニュー1-3</a></li>
                             </ul>
                         </li>

                         <li class="first"><a href="index.html">メニュー2</a>
	                     <ul>
                             <li><a href="index.html">メニュー2-1</a></li>
                             <li><a href="index.html">メニュー2-2</a></li>
                             <li><a href="index.html">メニュー2-3</a></li>
                             </ul>
                         </li>

                         <li class="first"><a href="index.html">メニュー3</a>
	                     <ul>
                             <li><a href="index.html">メニュー3-1</a></li>
                             <li><a href="index.html">メニュー3-2</a></li>
                             <li><a href="index.html">メニュー3-3</a></li>
                             </ul>
                         </li>

                         <li class="first"><a href="index.html">メニュー4</a>
	                     <ul>
                             <li><a href="index.html">メニュー4-1</a></li>
                             <li><a href="index.html">メニュー4-2</a></li>
                             <li><a href="index.html">メニュー4-3</a></li>
                             </ul>
                         </li>

                         <li class="first"><a href="index.html">メニュー5</a>
	                     <ul>
                             <li><a href="index.html">メニュー5-1</a></li>
                             <li><a href="index.html">メニュー5-2</a></li>
                             <li><a href="index.html">メニュー5-3</a></li>
                             </ul>
                         </li>
                     </ul>

</div><!--wrapper-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #f0ffff;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size: 16px;
	width: 100%;
}


#wrapper{
	width:1000px;
	margin:0 auto;
	position:relative;
}


/*globalNaviメニューここから*/
#globalNavi, #globalNavi ul {
	margin:0;
	padding:0;
	list-style-type:none;
	position:relative;
}

#globalNavi li	{
	float:left;
	position:relative;
}

#globalNavi ul {
	width: 200px;
	position: absolute;
	display: none;
}

/*headerメニュー1列目の通常リンク*/
#globalNavi li.first a{
	width: 200px;
	display: block;
	background: #ffffff;
	padding: 0px 0px;
	border-bottom: 1px dotted #909090;
	text-decoration: none;
	color: #696969;
}
/*headerメニュー1列目のマウスを乗せた時のリンク*/
#globalNavi li.first a:hover	{
	background: #350509;
	color: #FFF;
}
/*headerメニュー2列目の通常リンク*/
#globalNavi ul li a {
	width: 200px;
	display: block;
	background: #ffffff;
	padding: 0px 0px;
	border-bottom: 1px dotted #909090;
	text-decoration: none;
}
/*headerメニュー2列目のマウスを乗せた時のリンク*/
#globalNavi ul li a:hover {
	background: #350509;
	color: #FFF;
}

globalNaviの部分を変更すれば、デザインの編集ができます。

最後にjsファイルです。
custom.js

function mainmenu(){
$(" #globalNavi li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(600);//※表示速度変更は、show(600)の数字を変更で可能。
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 
 
$(document).ready(function(){					
	mainmenu();
});

このファイルで、表示速度変更などの変更が可能です。
以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
jQueryを使ったプルダウンのナビゲーション | CSS Lecture

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード

——————————————————————-
補足
デザインの変更は、cssファイルで変更ができます。
例:マウスオーバーの設定など。

プルダウンの表示速度の設定などは、
jsファイルで変更ができます。

今回は、思ったより簡単に設定ができました。
メニューが多いサイトなどは、便利だと思います。

是非試してください。


関連記事

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑