jQuery封装插件入门，导航下拉菜单

最新推荐文章于 2024-11-04 16:17:23 发布

dingbu6511

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Agrass/p/6595899.html

版权

只要写出一个导航，给下拉菜单的ul添加一个‘nav’的class名称即可实现下拉菜单，同时要记得引入这个js 插件。
学习的不是代码，是封装的思想。

<html>
<meta charset="utf-8" />
<head>
<title>导航插件</title>
<style>

.list{
    list-style:none;,
      margin:0;
      padding:0;
      color:#fff;
      width:1000px;
      margin:30px auto;
      font-size:16px;
      font-family: "微软雅黑";
      }
.list li{
    float:left;
    width:200px;
    height:30px;
    background:#333;
    line-height:30px;
    text-align:center;
    cursor:pointer;
}

</style>
</head>
<body>

    <ul class="list">
        <li>豆瓣排名前五电影
            <ul class="nav">
                <li>《肖申克的救赎 》 </li>
                <li>《肖申克的救赎 》 </li>
                <li>《肖申克的救赎 》 </li>
                <li>《肖申克的救赎 》 </li>
                <li>《肖申克的救赎 》 </li>
            </ul>
        </li>
        <li>纯音乐
            <ul class="nav">
                <li>《una mattin》 </li>
                <li>《una mattin》 </li>
                <li>《una mattin》 </li>
                <li>《una mattin》 </li>
                <li>《una mattin》 </li>
            </ul>
        </li>
        <li>绘画作品
            <ul class="nav">
                <li>《达芬奇的画像 》 </li>
                <li>《达芬奇的画像 》 </li>
                <li>《达芬奇的画像 》 </li>
                <li>《达芬奇的画像 》 </li>
                <li>《达芬奇的画像 》 </li>
            </ul>
        </li>
        <li>代码的艺术
            <ul class="nav">
                <li>《javascirpt的高级设计 》 </li>
                <li>《javascirpt的高级设计 》 </li>
                <li>《javascirpt的高级设计 》 </li>
                <li>《javascirpt的高级设计 》 </li>
                <li>《javascirpt的高级设计 》 </li>
            </ul>
        </li>
        <li>励志文学书籍
            <ul class="nav">
                <li>《牧羊人的奇幻之旅 》 </li>
                <li>《牧羊人的奇幻之旅 》 </li>
                <li>《牧羊人的奇幻之旅 》 </li>
                <li>《牧羊人的奇幻之旅 》 </li>
                <li>《牧羊人的奇幻之旅 》 </li>
            </ul>
        </li>
    </ul>

</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-nav.js></script>

//juery-nav.js
$('.nav').css({
    'list-style':'none',
    'margin':0,
    'padding':0,
    'display':'none'
 });

$('.nav').parent().hover(function(){ 
            $(this).find('.nav').slideDown('normal'); 
        },function(){ 
            $(this).find('.nav').stop().slideUp('normal'); 
        });