非常简洁的仿js树形菜单

  今天按计划,要制作完2P的web页面,其中有一页,左则目录列表需做成树型菜单结构展示,以前也做过树型菜单,但不是自己写出来的,利用了网上找到的jquery的tree插件。一般这些插件的“+”“-”符号很小巧,可我的页面设计稿上的“+”“-”做得比较大些,也不需要虚线。所以上网down了几个插件例子看,又看了一堆缺东缺西的垃圾例子后,决定用仅记得的一些jquery知识(有空我还是会继续学习的),写一个仿js树形菜单的效果。只要处理好ul 嵌套关系,就可实现了。很简洁,但还是欢迎高手指出不当之处。以下是demo:

  引入 jquery-1.9.1.min.js    

      CSS声明:

ul,li,i{ list-style:none; padding:0; margin:0; font-style:normal;}
i{ width:14px; height:14px; float:left;}
.box{ width:100%; max-width:300px; margin:0 auto;}
.nav-ml{ width:100%;}
.nav-ml ul{ margin-left:20px;}
.nav-ml i{width:14px; height:14px; background:url(../images/ml-nav-ico.png) no-repeat 0 0; margin-right:10px;}
.nav-ml i.unfold{width:14px; height:14px;  background:url(../images/ml-nav-ico.png) no-repeat -14px 0;}
.nav-ml a{display:block; font-size:14px; height:20px; padding:3px 0; color:#666; overflow:hidden;}
.nav-first,.nav-second,.nav-three{ margin-left:20px;}
.nav-three li{ background:url(../images/b-dot.jpg) no-repeat 0 8px; padding-left:10px;}
.fold{ display:none;}
.nav-three li:hover{ background-color:#fffceb;}

  

HTML源码:

   最后写js事件:


运行效果如下:

非常简洁的仿js树形菜单_第1张图片



  

 


你可能感兴趣的:(web页面制作)