用jquery插件写一个小米官网左侧二级菜单

来源：互联网发布：淘宝评价语100字编辑：程序博客网时间：2024/06/07 00:57
知识点：静态布局思路，jquery动态布局，代码格式规范，jquery插件调用，鼠标滑动二级菜单构建。
<!doctype html><!--声明html版本编写指令 H5--><html><!--根目录标签-->    <head>        <!--声明页面编码 uft-8 国际编码-->        <metacharset="UTF-8">        <!--网站三要素 关键字 页面描述 标题 SEO-->        <metaname="Keywords"content="">        <metaname="Description"content="">        <title>小米导航</title>    <styletype="text/css">    /*CSS层叠样式列表 美化 工厂*/    *{margin:0px;padding:0px;     font-family:"微软雅黑";}/*通配符 1.统一所有元素的默认样式 2.不同浏览器之间的兼容性问题*/    li{list-style:none;/*去列表圆点*/}    body{background:#434343;}    a{text-decoration:none;/*去下划线*/}    #Tz_banner{        width:237px;/*px 像素 宽度*/        height:458px;/*高*/        background:#333;/*背景*/        margin:130px0px 0px 54px;/* 上 右 下 左 顺时针*/        position:relative;/*相对定位 参照物*/    }    #Tz_banner .firstLi{        width:237px;        height:42px;        cursor:pointer;/*鼠标样式*/        font-size:14px;/*字体大小*/        text-indent:20px;/*首行缩进*/        line-height:42px;/*行高*/        color:#fff;/*字体颜色*/    }    #Tz_banner .firstLi:hover{background:#ff9900;}/*鼠标划过后的样式*/    #Tz_banner .firstLi .info{        height:458px;        background:#fff;        padding-left:10px;        position:absolute;/*绝对定位 改变位置的盒子*/        left:237px;        top:0px;        display:none;    }    #Tz_banner .firstLi .info li{        width:248px;        height:77px;        text-indent:0px;        margin-right:15px;        position:absolute;    }    #Tz_banner .firstLi .info li a.title{        height:77px;        display:block;/*变成块级元素*/        float:left;        line-height:77px;        left:0px;        top:0px;    }    #Tz_banner .firstLi .info li a.title img{        margin:16.5px15px 0px 15px;        float:left;    }    #Tz_banner .firstLi .info li a.title span{        float:left;        height:77px;        line-height:77px;color:#222;    }    #Tz_banner .firstLi .info li a.buy{        width:60px;        display:block;        float:right;        margin-top:25px;        border:1pxsolid #f60;/*边框 粗细 样式 颜色*/        line-height:24px;        text-align:center;/*文字居中*/        color:#f60;    }    #Tz_banner .firstLi .info li a.buy:hover{        background:#f60;        color:#fff;    }    </style>    </head>    <body>        <divid="Tz_banner">            <ul>                <liclass="firstLi">手机 电话卡                    <divclass="info">                        <ul>                            <li><aclass="title"href="#"><imgsrc="images/1/1.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a                            class="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/2.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/3.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/4.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/5.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/6.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/7.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/8.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/9.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/10.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/11.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/12.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/13.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/16.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/14.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                        </ul>                    </div>                </li>                <liclass="firstLi">笔记本 平板                    <divclass="info">                        <ul>                            <li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                            <li><aclass="title"href="#"><imgsrc="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><aclass="buy"href="#">选购</a></li>                        </ul>                    </div>                </li>                <liclass="firstLi">电视 盒子                                    </li>                <liclass="firstLi">路由器                                    </li>                <liclass="firstLi">手机 电话卡                                    </li>                <liclass="firstLi">笔记本 平板                                    </li>                <liclass="firstLi">电视 盒子                                    </li>                <liclass="firstLi">手机 电话卡                                    </li>                <liclass="firstLi">电视 盒子                                    </li>                <liclass="firstLi">耳机                                    </li>            </ul>        </div>    </body>    <scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script>    <scripttype="text/javascript">    $("#Tz_banner .firstLi .info").each(function(){            var $li =$(this).find("li");//获取到所有info下面的li        var length =$li.length;//得到info下面所有li的数量        var width =$li.width();//获取li的宽度        var height =$li.height();//获取li的高度        var col =Math.ceil(length/6);//向上取整        $(this).width(col*width);        $li.each(function(i){            var x = Math.floor(i/6);//向下取整            var y = i%6;//取余数            $(this).css({                left:x*width +"px",                top:y*height +"px"            });        });    });    $("#Tz_banner .firstLi").hover(function(){        $(this).find(".info").show();    },function(){        $(this).find(".info").hide();    });    </script></html>
web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端！
阅读全文
0 0