$(document).ready(function() { /// wrap inner content of each anchor with first layer and append background layer $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' ); // loop each anchor and add copy of text content $("#menu li a").each(function() { $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); }); $("#menu li a").hover(function() { // this function is fired when the mouse is moved over $(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide $(".over", this).stop().animate({'top': '0px'}, 250); // move down - show $(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show }, function() { // this function is fired when the mouse is moved off $(".out", this).stop().animate({'top': '0px'}, 250); // move up - show $(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide $(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide }); });
/** style used for both examples **/ .menu { height: 45px; display: block; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu ul li { /* width and height of the menu items */ float: left; overflow: hidden; position: relative; text-align: center; line-height: 45px; } .menu ul li a { /* must be postioned relative */ position: relative; display: block; width: 110px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .menu ul li a span { /* all layers will be absolute positioned */ position: absolute; left: 0; width: 110px; } .menu ul li a span.out { top: 0px; } .menu ul li a span.over, .menu ul li a span.bg { /* hide */ top: -45px; } /** 1st example **/ #menu { background: #EEE; } #menu ul li a { color: #000; } #menu ul li a span.over { color: #FFF; } #menu ul li span.bg { /* height of the menu items */ height: 45px; background: #666 ; }
<div id="menu" class="menu"> <ul> <li><a href="javascript:;">メニュー1</a></li> <li><a href="javascript:;">メニュー2</a></li> <li><a href="javascript:;">メニュー3</a></li> <li><a href="javascript:;">メニュー4</a></li> <li><a href="javascript:;">メニュー5</a></li> </ul> </div>