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

Category
： Javascript

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

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

使い方・ダウンロード

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;
}