jquery做为一个轻量级的dom框架给我们带来许多便利,下面是使用jquery来实现一个简单的下拉菜单:
1.首先,我们从google上引用脚本库:
<script></script>
2.然后我们写段HTML:
<div> <span><a>菜单一</a> </span><span><a>菜单二</a> <div> <a>子项一</a> <a>子项二</a> <a>子项三</a> </div> </span><span><a>菜单三</a> <div> <a>子项一</a> <a>子项二</a> <a>子项三</a> </div> </span> </div>
3.然后为其定义CSS
<style>
.menu span
{
float: left;
margin-right: 10px;
position: relative;
z-index: 100;
}
.menu a
{
text-decoration: none;
display: block;
}
.menu span:hover div, .menu span div:hover
{
display: block;
}
.menu span div
{
border: 1px solid black;
padding: 5px;
background-color: white;
display: none;
position: absolute;
white-space: nowrap;
}
</style>
4.hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
<script>
$(document).ready(function() {
if ($.browser.msie && $.browser.version <= 6.0) {
$(".menu span").hover(
function() {
$(this).children("div").attr("style", "display: block");
},
function() {
$(this).children("div").attr("style", "");
})
}
});
</script>
这样就可以了,实现一个简单的下拉菜单.
更多JQuery实现简单下拉菜单相关文章请关注PHP中文网！
