jQueryを使ったプルダウンのナビゲーション

プルダウンのナビゲーション

以前jQueryを使って簡単プルダウンメニューと記事を書いたんですが、今回は以前と違ってもう少し活用性のあるように作ってみました。

以前と違う点は、プルダウンメニューが表示される時にも少し動きつけた点と画像やアイコンを使い見栄えも整えました。

概要としては大体一緒なんですが、以前仮説が少なすぎたので、今回は詳しく解説を入れていきたいと思います。

…ここからが続き

プルダウンのナビゲーションの解説

まず今回使用しているjsは「jquery.js」ロールオーバー時に使っている「yuga.js」プルダウンのフワって感じの動きをつけている「menu.js」を使わさせて頂いております。

    demo page

    XHTML

    <ul id="globalNavi">
    <li><a href="#"><img src="image/css.gif" alt="CSS" class="btn" width="180" /></a>
    	<ul>
        <li class="first"><a href="#">CSS テクニック</a></li>
        <li><a href="#">CSS ハック</a></li>
        <li><a href="#">CSS テンプレート</a></li>
        <li><a href="#">CSS レイアウト</a></li>
        </ul>
    </li>
    <li><a href="#"><img src="image/web_design.gif" alt="Web Design" class="btn" width="180" /></a>
    	<ul>
        <li class="first"><a href="#">アイコン素材</a></li>
        </ul>
    </li>
    <li><a href="#"><img src="image/javascript.gif" alt="Javascript" class="btn" width="180" /></a>
    	<ul>
        <li class="first"><a href="#">ロールオーバー</a></li>
        </ul>
    </li>
    <li><a href="#"><img src="image/flash.gif" alt="Flash" class="btn" width="180" /></a>
    	<ul>
        <li class="first"><a href="#">Action Script </a></li>
        </ul>
    </li>
    <li><a href="#"><img src="image/mt.gif" alt="Movable Type" class="btn" width="180" /></a>
        <ul>
        <li class="first"><a href="#">プラグイン</a></li>
        <li><a href="#">テンプレート</a></li>
        </ul>
    </li>
    </ul>
    

    CSS

    1. ulのスタイルのリセット、liの横並びを行い、忘れずにposition:relative;をかけておきましょう。

    #globalNavi, #globalNavi ul {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	position:relative;
    }
    #globalNavi li	{
    	float:left;
    	position:relative;
    }
    

    2. プルダウンで表示されるulの要素の全体の幅とpositionを決めておきます。(position: absolute;を忘れずに!)

    #globalNavi ul {
    	width: 175px;
    	position: absolute;
    	top: 40px;
    	left: 3px;
    	display: none;
    }
    

    3. プルダウンで表示されるulの要素の全体の幅とpositionを決めておきます。(position: absolute;を忘れずに!)

    #globalNavi ul {
    	width: 175px;
    	position: absolute;
    	top: 40px;
    	left: 3px;
    }
    

    4. プルダウンで表示されるli要素の絶対の幅やpadding領域、iconの指定をしておきます。(display: block;を忘れずに!)

    #globalNavi ul li a	{
    	width: 143px;
    	display: block;
    	background: #BFC0C0 url(image/icon.gif) no-repeat;
    	padding: 7px 5px 8px 27px;
    	border-bottom: 1px dotted #909090;
    	color: #000;
    	text-decoration: none;
    }
    

    5. hoverの動き。liの一番最初の要素の指定です。(早くfirst-childが普通に使えるようになって欲しいです...)

    #globalNavi ul li a:hover	{
    	background: #000 url(image/icon_on.gif) no-repeat;
    	color: #FFF;
    }
    #globalNavi ul li.first a	{
    	background: #BFC0C0 url(image/bg_navi.gif) no-repeat;
    	padding: 16px 5px 7px 27px;
    }
    #globalNavi ul li.first a:hover	{
    	background: #000 url(image/bg_navi_on.gif) no-repeat;
    }
    

    menu.js

    idの名前を変更したい方は「#globalNavi」の部分を変更。show(600)の数字を小さくすると動きが早くなるので、お好みの数字を入力下さい。

    function mainmenu(){
    $(" #globalNavi li").hover(function(){
    		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(600);
    		},function(){
    		$(this).find('ul:first').css({visibility: "hidden"});
    		});
    }
    
     
     
    $(document).ready(function(){					
    	mainmenu();
    });
    

    まとめ

    もしプルダウンに表示される部分も画像にしたい場合は、4.と5.のCSSを消してXHTMLを画像に変更すれば大丈夫です。

    最近プルダウンのナビゲーションを使っているサイトをよく見かけますし、仕事使う機会も少なくはないので、もし使う機会があったら是非参考にして下さい。

    demo page

    追加項目

    dafonさんから多段式プルダウンにしたいと言うリクエストがありましたので、三段、四段式にしたい場合は下記CSSを追加して下さい。

    サンプルページ2でご確認下さい。

    #globalNavi ul li ul {
    	width: 175px;
    	position: absolute;
    	top: 0px;
    	left: 175px;
    }
    

Track Back

Web Mugen

ドロップダウンメニューを実現するjQueryのスクリプト改

このあいだ『ドロップダウンメニューを実現するjQueryのスクリプト』という記事を書きましたが、JavaScriptオフの環境に対して全く対応していません...

by Web Mugen  

Comments

MIYA

MIYA

ko-ji さんはじめまして!

①②にある質問のロールオーバーですが、デモでは yuga.js を使っております。
その為に③で質問してる btn を使用しています。

③の first については本文内で説明してあります…
5. hoverの動き。liの一番最初の要素の指定です。

2週間足らずなら正直分からない事だらけだと思いますが、頑張って下さいね!

2010年10月12日 11:40

ko-ji

ko-ji

MIYAさま
お世話になります。
意を決して質問させていただきます。
HPをはじめて2週間足らずのものです。

3点ご質問があります。
お忙しい中大変すみませんがご教授して
頂ければ幸いです。


デモのように、メインメニュー(CSS,WEBDEZAIN・・)も
オレンジ色にオーバーオールするCSSが分かりません
どのように書けばよろしいでしょうか?


②サブメニューも図で作りました。①と同様に、
オーバーオールするにはどうすればよいでしょうか?

③btnとfirstのクラスは、
どこで使われていますか?jqueryの関係上
必要なのでしょうか?

2010年10月10日 17:57

MAX

MAX

はじめまして。MAXと申します。
いつも、参考にさせて頂いております。

サンプルのプルダウンを使って、表示されているページが解るように、親メニュー(CSS、Web Disign、Javascript、Flash、Movable Type)を、それぞれ色もしくはボタン画像を変えることは可能でしょうか?

ご教授頂ければ幸いです。
宜しくお願い致します。

2010年06月30日 22:19

MIYA

MIYA

rabiさん。はじめまして!

それは全然可能ですよ!

#globalNavi ul {
width: 175px;
position: absolute;
top: 40px;
left: 3px;
}

でナビゲーションの下に表示するようにしているので、ここを右来るように top left の数字を任意の位置に指定してあげて下さい。

2010年04月26日 00:01

rabi

rabi

はじめまして。
参考にさせていただきました。
質問があるのですが、例えばメニューの上方向に
ナビゲーションを表示させることは可能でしょうか。
よろしくお願いします。

2010年04月04日 13:30

kiyo

kiyo

先日リンク先が別ウィンドウになってしまうとう質問をしたものです。
大変失礼いたしました。
yuga.js
の方に詳しい説明がありました。
先日のメールは無視してください。

2010年02月17日 11:40

kiyo

kiyo

はじめまして。
こちらを基にプルダウンメニューを作ってみました。
動きはうまくいったのですが、リンク先が、なぜか別ウィンドウになってしまいます。
試しにリンクのところにtarget=_selfの指定をしてみたのですが、無視されて別ウィンドウになってしまします。
特に_blankに指定された個所もないように感じるのですが、CSSのどこかにtargetを指定する個所があるのでしょうか?
この回避方法がもしありましたら、ご教授ください。

2010年02月16日 20:19

MIYA

MIYA

上らへんの右側「Download」ってボタンがあるので、そこからダウンロード出来ますよ
後縦扱いにする際は
#globalNavi li {
float:left;
position:relative;
}
float:left;を削除。
#globalNavi ul {
width: 175px;
position: absolute;
top: 40px;
left: 3px;
display: none;
}
width top leftの数値を調整。

で大半は大丈夫だと思います。

2010年02月01日 10:57

HAMA

HAMA

始めまして。
初心者ですが、こちらに掲載していますナビゲーションを
使って見たいと思いますが、jqueryのサイトへ行きましたが、jquery.jsのダウンロードが何処にあるのかわかりません。
すみませんがどれをDLすればよろしいのでしょうか?
あと、縦使いにする場合は如何すればいいのでしょか?
初歩的な事をお聞きしまして申し訳御座いませんが宜しくお願い致します。

2010年01月30日 00:34

MIYA

MIYA

検証する点としてはまず今使用しているJavaScriptを全部切った状態でどうか?
次にIE6用のハックを何処かで使っていないか?
(* html とか_でプロパティを使用している点など)

それでも分からない状態ですと面倒な作業にはなるのですが、CSSを全部コメントアウトなどをして、一つ、一つの要素を表示させて、どの部分が影響するのか確認するしかないと思います…

2009年07月07日 23:35

PAT

PAT

お世話になっております。

言葉が足りずに申し訳ございません。
IE6で確認したのは昨日が初めてでした。
ですので、教えていただいたソースが原因ではないです。

IE6以外では綺麗に表示できているのですが
IE6だとその部分がすっぽり抜けてしまっています。

このページのソースを何度も見直しても
表示させることができずにいます。

IE6だけできない原因で何か思いつくことがあれば教えてください。

2009年07月07日 15:59

MIYA

MIYA

PATさん

以前教えたソースで自分でIE6でも確認しましたが、自分の方ではその用な問題はおきていませんで、PATさんが指定した何かの要素が効いているんではないでしょうか?

2009年07月06日 19:48

PAT

PAT

たびたび申し訳ございません。

IE6で見たところ、メニュー自体が表示されませんでした。
どのようにすれば表示されるのか教えていただけないでしょうか?

お忙しいところ、お手数おかけいたしますが
よろしくお願いします。

2009年07月06日 15:25

PAT

PAT

お忙しいところ、ご親切にありがとうございました。

おしえていただいた通りにやってみたところ
表示されなくなりました。

助かりました。
本当にありがとうございました。

2009年07月06日 14:49

MIYA

MIYA

要因おそらくなんですが、プルダウンの表示・非表示事態の指定をスプリクト内で行っているプラグインですので、スプリクトを読みこむまでの一瞬表示されてしまうのだと思われます。

menu.jsに記述してある。
$(" #globalNavi ul ").css({display: "none"});
を消し。

CSSに
#globalNavi ul { display: none; }
を記載してみて下さい。

予想としてはこれで問題が解決出来ると思われます。

2009年07月05日 21:52

PAT

PAT

こんばんは。
このサイトを参考にプルダウンメニューを作成させていただきました。

「もしプルダウンに表示される部分も画像にしたい場合は、
4.と5.のCSSを消してXHTMLを画像に変更すれば大丈夫です。」
というのを参考に画像を設定したのですが
ページを読み込む際にプルダウンメニューの
すべての内容が2秒ぐらい表示されてしまいます。

考えられる原因があれば教えてください。
お忙しいとは思いますが、よろしくお願いします。

2009年07月04日 22:20

成海

成海

> お力に慣れずにすみません…。
とんでもないです。
これからも参考にさせてもらいます。
とっても見やすくて私好みです。

2009年04月01日 10:08

MIYA

MIYA

そうですか…

自分の環境化では大丈夫ですが原因はおっしゃっている通りにJqueryのfirstの読み込みが遅いと思われますね…。

また違うプルダウンメニューも書きたいと思っているのでその時は読み込みの早さの部分も考慮したのにしたいと思います。

お力に慣れずにすみません…。

2009年03月31日 19:26

成海

成海

ありがとうございます!
http://www.css-lecture.com/template/2008/0807/
こちらですが、症状は変わっていないようでした。
IE6.0.2900.5512 xpsp_sp3です。
IE6はJqueryのfirstの読み込みが遅いのかもしれませんね。
こういうのはお客に突っ込まれそうでイヤなところです。

2009年03月31日 13:55

MIYA

MIYA

成海さん

ご指摘ありがとうございました。

デモページのCSSで言うと
#globalNavi ul ul{
display:none;
}
を追加して下さい。

これでご指摘されていた現象は解決出来ました。
デモページの方も修正済みです。

2009年03月31日 12:18

成海

成海

はじめまして。
参考にさせていただいております。
この度質問がありまして、コメントさせていただきました。

IE6でこのプルダウンのサンプルページを見ますと、
プルダウン配下の部分が一瞬表示されてすぐ消える感じでレンダリングされます。
これを表示させないようにすることは可能でしょうか。

ちなみに、
http://www.css-lecture.com/template/2008/0524/
のページは「一瞬表示される」ことはなかったので、こちらの処理に合わせたいのですが、イマイチ違いがわからない状態です。

ご助言いただけるとうれしいです。
よろしくお願いします。

2009年03月30日 13:19

MIYA

MIYA

>CSSは、デモでも解説している1番をスタイルシートをコピーしてCSSファイルを作ればいいのですか。
そうです。

>CSSは、jsファイルに置くのですか。
こちらは任意のフォルダで構いません。人によって作る構造は違いますので、好きなフォルダを作ってそこに入れて下さい。

>CSSのファイル名は、何にすれば良いでしょうか。
こちらも任意の名前で構いません。

>headに書き込むソースはサンプルのソースを使えばいいのですか。
基本的には同じように書き込んでくれて構いませんが、jsやcssファイルのパスは自分のサイトのディレクトリにあわせて下さい。

>jsファイルに「jquery.js」「yuga.js」「menu.js」に入れとけばいいですか。
自分はjsファイルはjsってフォルダに入れているだけです。
こちらも好きな場所で大丈夫ですよ。

2009年03月04日 16:29

haru

haru

ありがとございます。

1.CSSは、デモでも解説している1番をスタイルシート  をコピーしてCSSファイルを作ればいいのですか。
  CSSは、jsファイルに置くのですか。
  CSSのファイル名は、何にすれば良いでしょうか。
2.に書き込むソースはサンプルのソースを使え  ばいいのですか。
3.jsファイルに「jquery.js」「yuga.js」      「menu.js」に入れとけばいいですか。

すみません。
かんたんに教えて頂いているのに、分からなくて
何時でも良いですのでお返事お待ちしています。

2009年03月04日 16:13

MIYA

MIYA

>ファイルが多くてどのファイルが必要なのかわかりません。

最低限必要なファイルは「jquery.js」「yuga.js」「menu.js」後はデモでも解説しているスタイルシートが必要になります。

デモページでは必要外の要素は一切記述していなので、ソースをまるまる使ってくれたら出来ますよ。

ちなみに画像をそのまま使うとしたら下記URLかだダウンロードしてみてください。
http://www.css-lecture.com/template/2008/0807/image.zip

2009年03月04日 12:51

haru

haru

こんにちは
みなさん・・プルダウンメニューの設定ができている
用ですが、僕は詳しくないので、全然できません。

「jquery.js」「yuga.js」「menu.js」ダウンロードしましたが、ファイルが多くてどのファイルが必要なのか
わかりません。もしよければ、ディレクトリーから詳しく
教えて頂けないでしょうか。
時間の空いている時で良いですので宜しくお願いします。

2009年03月04日 10:42

cktcat

cktcat

何度も申し訳ございません。
だいぶ邪道なやり方のような気もしますが・・・自己解決しました。
ありがとうございます!!

2008年11月20日 08:40

cktcat

cktcat

こんにちは
こちらを基にして作ってみたら
ちゃんとできました!ありがとうございます。

それで、欲を申しますと・・・
現在のページの位置が分かりやすいように、一段目の項目だけ各ページごとにonの状態に表示させたくて、単純にhtml内のイメージを「css_on.gif」にしたらFirefoxはOKだったのですが、IEでエラーが出てしまいます。
この回避方法がもし分かりましたら、ご教授ください。

2008年11月20日 05:53

dafon

dafon

つっけんどんな質問ですいませんでした。
ご対応していただきありがとうございます。
助かりました。

2008年10月07日 10:25

MIYA

MIYA

追加項目としてエントリーしましたのでご確認下さい。

2008年09月05日 13:01

MIYA

MIYA

多段式って事はulの中にul。そしてその中にもulを作るって認識で間違いないですよね?
このサンプルはソースを分かりやすくシンプルにする為、三段用にはあえて作っていなかったんですよね…
すみません。

今度時間を作って三段、四段表示でも大丈夫なのをエントリーしますので、しばらくお待ち下さい><

2008年09月02日 20:52

dafon

dafon

多段式プルダウンにしたいのですが、
どうもうまくいきません。

2008年09月02日 18:08

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article