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

来源：互联网发布：java破解版游戏. 编辑：程序博客网时间：2024/06/05 14:53

只要写出一个导航，给下拉菜单的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');         });

0 0