jquery一个简单的菜单小插件

时间:2022-07-06 10:28:38

刚学会封装插件,先来封装一个小的菜单插件

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();