jquery下拉菜单

来源：互联网发布：淘宝卖家订单险多少钱编辑：程序博客网时间：2024/06/06 08:49

效果预览：
这里写图片描述
实现思路：
1.子菜单默认隐藏
2.鼠标经过主菜单，子菜单显示
3.鼠标离开主菜单，子菜单隐藏

代码：
本文引入的本地jquery.js
使用本代码的话可以将<script src="jquery.js"></script>
改成<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>*必须有网络

<!DOCTYPE html><html lang="en"><head>    <style>        ul{margin:0;padding: 0}        li{list-style: none;}        a{text-decoration: none;}        .nav li{float: left;border: solid 1px gray;line-height: 30px;padding-left: 20px;padding-right: 20px;}        .nav > li{position: relative;}        .nav ul{position: absolute;left:0px;top: 30px;width: 120px;}    }}}</style><script src="jquery.js"></script><meta charset="UTF-8"><title>Document</title></head><body>    <ul class="nav">        <li><a href="">产品介绍</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>        <li><a href="">公司简介</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>        <li><a href="">人才招聘</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>        <li><a href="">关于我们</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>        <li><a href="">应用案例</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>        <li><a href="">厂房建设</a>            <ul>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>                <li><a href="">二级栏目</a></li>            </ul>        </li>    </ul>    <script>        //子菜单默认隐藏        $(".nav ul").hide();        //鼠标经过主菜单，子菜单显示        //.nav > li代表.nav的直系子li        $(".nav > li").mouseenter(function(){                $(this).children().stop(false,true).show();        })        //鼠标离开主菜单，子菜单隐藏        $(".nav > li").mouseleave(function(){                $(".nav ul").stop(false,true).hide();        })    </script></body></html>

二、

这里写图片描述

<!DOCTYPE html><html lang="en"><head><script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{margin: 0;padding: 0}    a{text-decoration: none;color: white}    li{list-style: none;}    .nav>li{        margin-left: 5px;        line-height: 30px;        text-align: center;        width: 100px;        height: 30px;        background-color: black;        color: white;        float: left;    }    .nav>li li{        line-height: 30px;        text-align: center;        border-top: 1px solid white;        width: 100px;        height: 30px;        background-color: black;        color: white;    }       .nav>li li:hover{        background-color: #999;    }    .nav_ul{            display: none;    }    </style></head><body>     <ul class="nav">        <li><a href="">1</a>            <ul class="nav_ul">                <li><a href="">2</a></li>                <li><a href="">2</a></li>                <li><a href="">2</a></li>            </ul>        </li>        <li><a href="">2</a>            <ul class="nav_ul">                <li>2</li>                <li>2</li>                <li>2</li>            </ul>        </li>        <li><a href="">3</a>            <ul class="nav_ul">                <li>2</li>                <li>2</li>                <li>2</li>            </ul>        </li>        <li><a href="">4</a>            <ul class="nav_ul">                <li>2</li>                <li>2</li>                <li>2</li>            </ul>        </li>    </ul>    <script>        $(".nav > li").mouseenter(function(){                $(this).children("ul").stop(false,true).show();        })        $(".nav > li").mouseleave(function(){                $(this).children("ul").stop(false,true).hide();        })    </script></body></html>

阅读全文

0 0