效果图:
HTML代码:
<!--menu-->
<div id="bar">
<div id="menu-container" style="width:500px;float:left;position:relative;">
<ul id="navigationMenu">
<li><a href="FlucStockManager.aspx" class="normalMenu">WMS-入库查询及确认</a></li>
<li><a href="OutBoundInfoSearch.aspx" class="normalMenu">WMS-出库查询</a></li>
<li><a href="#" class="normalMenu" οnclick="QuitLogin('MyCook','');">退出 系统</a></li>
</ul>
</div>
</div>
CSS代码:
/* 导航菜单css */
/*导航菜单背景*/
#bar
{
width: 100%;
height: 35px;
padding: 15px 0;
background: url(../images/bar.png) repeat-x;
position:absolute;
}
ul {
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul li {
border: 1px solid #444444;
display: inline-block;
float: left;
height: 35px;
list-style-type: none;
overflow: hidden;
}
ul li a, ul li a:hover,ul li a:visited
{
text-decoration: none;
}
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu, .selectedMenu:visited {
outline: none;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 15px;
padding-right: 15px;
display: block;
text-align: center;
}
.hoverMenu, .hoverMenu:visited,
.selectedMenu, .selectedMenu:visited {
display: block;
margin-top: -25px;
background: url(../images/grey_bg.gif) repeat-x #eeeeee;
color: #444444;
}
.selectedMenu, .selectedMenu:visited {
margin: 0;
}
.normalMenu, .normalMenu:visited {
color: white;
margin-top: -15px;
background: url(../images/dark_bg.gif) repeat-x #444444;
}
CSS中用到的图片:
dark_bg.gif:grey_bg.gif:
JS代码:
<script src="js/jquery-1.7.1.js"></script>
$(document).ready(function ()
{
//menu
$('#navigationMenu li .normalMenu').each(function () {
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function () {
$(this).find('.hoverMenu').stop().animate({ marginTop: '1px' }, 200);
},
function () {
$(this).find('.hoverMenu').stop().animate({ marginTop: '-25px' }, 200);
});
});