*

メニューをプルダウンする方法。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

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

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

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

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

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

記事を読む

Message

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

PAGE TOP ↑