JQuery implements simple drop-down menu-PHP开发-php.cn

JQuery implements simple drop-down menu

高洛峰

Release： 2016-12-15 15:57:54

Original

1497 people have browsed it

As a lightweight DOM framework, JQuery brings us a lot of conveniences. Here is how to use JQuery to implement a simple drop-down menu:

1. First, we quote the script library from Google:

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

Copy after login

2. Then We write a piece of 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>

Copy after login

3. Then define CSS for it

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

Copy after login

4.hover(over,out)

A method that simulates hover events (the mouse moves over an object and out of the object). This is a custom method that provides a "keep in it" state for frequently used tasks.

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

Copy after login

That’s it, implement a simple drop-down menu.

For more articles related to JQuery implementing a simple drop-down menu, please pay attention to the PHP Chinese website!