mootools 滑动菜单

-->

This is a menu item

• sub-menu item 1
• sub-menu item 2
• sub-menu item 3
• sub-menu item 4

<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script> -->


<STYLE>
#menuItem {
    PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; WIDTH: 200px; PADDING-RIGHT: 4px; BACKGROUND: #ddd; PADDING-TOP: 4px
}
#smContainer {
    PADDING-BOTTOM: 2px; PADDING-LEFT: 4px; WIDTH: 200px; PADDING-RIGHT: 4px; BACKGROUND: #ccc; PADDING-TOP: 0px
}
#smContainer LI {
    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#smContainer A {
    PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; DISPLAY: block; BACKGROUND: #ccc; COLOR: #000; PADDING-TOP: 2px
}
#smContainer A:hover {
    BACKGROUND: #eee; COLOR: #000
}
</STYLE>


<DIV id=menuItem>This is a menu item </DIV>
<DIV id=smContainer>
<UL>
<LI><A href="javascript:void()">sub-menu item 1</A> 
<LI><A href="javascript:void()">sub-menu item 2</A> 
<LI><A href="javascript:void()">sub-menu item 3</A> 
<LI><A href="javascript:void()">sub-menu item 4</A> </LI></UL></DIV>

<script defer=defer>

new MenuSlider($('menuItem'), $('smContainer'));

</script>