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

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

Mootools を使ったプルダウン式のメニューです。

JavaScript drop down menu using Mootools 1.2 で紹介、配布されているのですが、簡単な解説をしておきます。

demo page

…ここからが続き

使い方・ダウンロード

JavaScript drop down menu using Mootools 1.2 の下の方にある「Download MooTools drop down menu source.」からダウンロードする事が出来ます。

head

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js "></script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript">
	window.addEvent('domready', function(){
		$('navi').getElements('li.menu').each( function( elem ){
			var list = elem.getElement('ul.links');
			var myFx = new Fx.Slide(list).hide();
			elem.addEvents({
				'mouseenter' : function(){
					myFx.cancel();
					myFx.slideIn();
				},
				'mouseleave' : function(){ 
					myFx.cancel();
					myFx.slideOut();
				}
			});
		})
	});
</script>

XHTML

<div id="navigation">

<ul id="navi">
    <li class="menu">Menu 1
        <ul class="links">
            <li><a href="#">リンク 1</a></li>
            <li><a href="#">リンク 2</a></li>
        </ul>
    </li>
    <li class="menu">Menu 2
        <ul class="links">
            <li><a href="#">リンク 1</a></li>
            <li><a href="#">リンク 2</a></li>
            <li><a href="#">リンク 3</a></li>
        </ul>
    </li>
    <li class="menu">Menu 3
        <ul class="links">
            <li><a href="#">リンク 1</a></li>
            <li><a href="#">リンク 2</a></li>
            <li><a href="#">リンク 3</a></li>
            <li><a href="#">リンク 4</a></li>
        </ul>
    </li>
    <li class="menu">Menu 4
        <ul class="links">
            <li><a href="#">リンク 1</a></li>
            <li><a href="#">リンク 2</a></li>
        </ul>
    </li>
</ul>
        
<!--/ #navigation--></div>

CSS

ul	{ margin:0px; padding:0px; list-style-type:none; }
#navigation	{ margin-bottom: 200px; position: relative; }
#navi { 
	display: block;
	text-align: center;
	width: 700px;
	position: absolute;
	top:0;
	left:0;
}
#navi li {
	width: 150px;
	float: left;
	background: #212121;
	font-weight: bold;
	color: #2D88B3; 
	padding: 5px;
	cursor:pointer;
}
#navi li ul {
	padding-top:10px;
}
#navi li ul li { 
	display: block;
	float: none;
	clear: both;
}
#navi li ul li a {
	display:block;
	color: #FFF;
	font-weight:normal;
	text-decoration:none;
}
#navi li ul li a:hover { 
	text-decoration: underline;
	color: #CCC;
}

demo page

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