JQuery实现简单下拉菜单

JQuery做为一个轻量级的DOM框架给我们带来许多便利,下面是使用JQuery来实现一个简单的下拉菜单:

1.首先,我们从Google上引用脚本库:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2.然后我们写段HTML:

<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>

这样就可以了,实现一个简单的下拉菜单.

更多JQuery实现简单下拉菜单相关文章请关注PHP中文网！