刚学会封装插件,先来封装一个小的菜单插件
html部分
<ul class="zong">
<li class="yiji">
<a href="#">公司信息</a>
<ul class="fji">
<li>itme 1</li>
<li>itme 1</li>
<li>itme 1</li>
<li>itme 1</li>
</ul>
</li>
<li class="yiji">
<a href="#">公司简介</a>
<ul class="fji">
<li>itme 1</li>
<li>itme 2</li>
<li>itme3</li>
<li>itme 4</li>
</ul>
</li>
<li class="yiji">
<a href="#">公司发展</a>
<ul class="fji">
<li>itme 1</li>
<li>itme 2</li>
<li>itme3</li>
<li>itme 4</li>
</ul>
</li>
<li class="yiji">
<a href="#">公司发展</a>
</li>
</ul>
css 部分
.zong>li{
float: left;
margin: 20px 10px auto auto;
background-color: powderblue;
width: 120px;
text-align: center;
height: 30px;
line-height: 30px;
}
ul{
margin:;
padding:;
list-style: none;
}
a{ text-decoration: none;color: #000000}
.zong>li>ul>li{ background-color: #ccc;}
.zong>li>ul>li:hover{
margin: 1px;
-webkit-transition:all 0.3s;
}
.fji{
display: none;
}
js部分除了要引入的jquery文件之外引入自定义的menu.js
menu.js
$.fn.extend({
yidong:function(){
$(this).on({
"mouseenter":function(){
$(this).find("ul").css("display","block"); },
"mouseleave": function () {
$(this).find("ul").css("display","none");
}
});
}
});
使用方式,在页面中直接调用yidong()方法
$(".yiji").yidong();