JQuery做为一个轻量级的DOM框架给我们带来许多便利,下面是使用JQuery来实现一个简单的下拉菜单:
1.首先,我们从Google上引用脚本库:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<div class="menu"> <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a> <div> <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a> </div> </span><span><a href="#">菜单三</a> <div> <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a> </div> </span> </div>
3.然后为其定义CSS
<style type="text/css"> .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 type="text/javascript"> $(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>