• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

系列目录

本节主要知识点是easyui 的手风琴加树结构做菜单导航

有园友抱怨原来菜单非常难看，但是基于原有树形无限级别的设计，没有办法只能已树形展示

先来看原来的效果

改变后的效果，当然我已经做好了，最后只放出代码供大家参考，其实网上也有这方面的资料，但是不是很好用，我还是自己写了

手风琴一直都是比较漂亮和受欢迎的，但是基于树多级别来说，做起来就比较麻烦，所以我这里也用了手风琴加树的模式来做

注：上面的图标都是乱添加的，并不代表意思

进入正文：

首先必须下载一些图标。可以自行百度网页小图标，那资源是非常多了，我在群里也分享了一组3800个的图标，我只拿其中的几百个出来用用，下载的图标都是零散的，我们必须节省用户的带宽，所以要先将图片进行压缩生成CSS样式，这里我用的工具是CSSSatyr,大家可以百度后下载即可，这里我已经为大家随便挑选了几个图片，有些同学可能还不知道有这个方法组图，现在你会了，把你的网站的图片组起来，节省带宽！非常重要，无论是加载还是用户体验都快不少

 

生成的CSS如下

.pic_1 {background:url("/Content/Images/icon.png") -0px -0px no-repeat; width: 16px; height: 16px; }
.pic_2 {background:url("/Content/Images/icon.png") -16px -0px; width: 16px; height: 16px; }
.pic_3 {background:url("/Content/Images/icon.png") -32px -0px; width: 16px; height: 16px; }
.pic_4 {background:url("/Content/Images/icon.png") -48px -0px; width: 16px; height: 16px; }
.pic_5 {background:url("/Content/Images/icon.png") -64px -0px; width: 16px; height: 16px; }
.pic_6 {background:url("/Content/Images/icon.png") -80px -0px; width: 16px; height: 16px; }
.pic_7 {background:url("/Content/Images/icon.png") -96px -0px; width: 16px; height: 16px; }
.pic_8 {background:url("/Content/Images/icon.png") -112px -0px; width: 16px; height: 16px; }
.pic_9 {background:url("/Content/Images/icon.png") -128px -0px; width: 16px; height: 16px; }
.pic_10 {background:url("/Content/Images/icon.png") -144px -0px; width: 16px; height: 16px; }
.pic_11 {background:url("/Content/Images/icon.png") -160px -0px; width: 16px; height: 16px; }
.pic_12 {background:url("/Content/Images/icon.png") -176px -0px; width: 16px; height: 16px; }
.pic_13 {background:url("/Content/Images/icon.png") -192px -0px; width: 16px; height: 16px; }
.pic_14 {background:url("/Content/Images/icon.png") -208px -0px; width: 16px; height: 16px; }
.pic_15 {background:url("/Content/Images/icon.png") -224px -0px; width: 16px; height: 16px; }
.pic_16 {background:url("/Content/Images/icon.png") -240px -0px; width: 16px; height: 16px; }
.pic_17 {background:url("/Content/Images/icon.png") -256px -0px; width: 16px; height: 16px; }
.pic_18 {background:url("/Content/Images/icon.png") -272px -0px; width: 16px; height: 16px; }
.pic_19 {background:url("/Content/Images/icon.png") -288px -0px; width: 16px; height: 16px; }
.pic_20 {background:url("/Content/Images/icon.png") -304px -0px; width: 16px; height: 16px; }
.pic_21 {background:url("/Content/Images/icon.png") -320px -0px; width: 16px; height: 16px; }
.pic_22 {background:url("/Content/Images/icon.png") -336px -0px; width: 16px; height: 16px; }
.pic_23 {background:url("/Content/Images/icon.png") -352px -0px; width: 16px; height: 16px; }
.pic_24 {background:url("/Content/Images/icon.png") -368px -0px; width: 16px; height: 16px; }
.pic_25 {background:url("/Content/Images/icon.png") -384px -0px; width: 16px; height: 16px; }
.pic_26 {background:url("/Content/Images/icon.png") -0px -16px; width: 16px; height: 16px; }
.pic_27 {background:url("/Content/Images/icon.png") -16px -16px; width: 16px; height: 16px; }
.pic_28 {background:url("/Content/Images/icon.png") -32px -16px; width: 16px; height: 16px; }
.pic_29 {background:url("/Content/Images/icon.png") -48px -16px; width: 16px; height: 16px; }
.pic_30 {background:url("/Content/Images/icon.png") -64px -16px; width: 16px; height: 16px; }
.pic_31 {background:url("/Content/Images/icon.png") -80px -16px; width: 16px; height: 16px; }
.pic_32 {background:url("/Content/Images/icon.png") -96px -16px; width: 16px; height: 16px; }
.pic_33 {background:url("/Content/Images/icon.png") -112px -16px; width: 16px; height: 16px; }
.pic_34 {background:url("/Content/Images/icon.png") -128px -16px; width: 16px; height: 16px; }
.pic_35 {background:url("/Content/Images/icon.png") -144px -16px; width: 16px; height: 16px; }
.pic_36 {background:url("/Content/Images/icon.png") -160px -16px; width: 16px; height: 16px; }
.pic_37 {background:url("/Content/Images/icon.png") -176px -16px; width: 16px; height: 16px; }
.pic_38 {background:url("/Content/Images/icon.png") -192px -16px; width: 16px; height: 16px; }
.pic_39 {background:url("/Content/Images/icon.png") -208px -16px; width: 16px; height: 16px; }
.pic_40 {background:url("/Content/Images/icon.png") -224px -16px; width: 16px; height: 16px; }
.pic_41 {background:url("/Content/Images/icon.png") -240px -16px; width: 16px; height: 16px; }
.pic_42 {background:url("/Content/Images/icon.png") -256px -16px; width: 16px; height: 16px; }
.pic_43 {background:url("/Content/Images/icon.png") -272px -16px; width: 16px; height: 16px; }
.pic_44 {background:url("/Content/Images/icon.png") -288px -16px; width: 16px; height: 16px; }
.pic_45 {background:url("/Content/Images/icon.png") -304px -16px; width: 16px; height: 16px; }
.pic_46 {background:url("/Content/Images/icon.png") -320px -16px; width: 16px; height: 16px; }
.pic_47 {background:url("/Content/Images/icon.png") -336px -16px; width: 16px; height: 16px; }
.pic_48 {background:url("/Content/Images/icon.png") -352px -16px; width: 16px; height: 16px; }
.pic_49 {background:url("/Content/Images/icon.png") -368px -16px; width: 16px; height: 16px; }
.pic_50 {background:url("/Content/Images/icon.png") -384px -16px; width: 16px; height: 16px; }
.pic_51 {background:url("/Content/Images/icon.png") -0px -32px; width: 16px; height: 16px; }
.pic_52 {background:url("/Content/Images/icon.png") -16px -32px; width: 16px; height: 16px; }
.pic_53 {background:url("/Content/Images/icon.png") -32px -32px; width: 16px; height: 16px; }
.pic_54 {background:url("/Content/Images/icon.png") -48px -32px; width: 16px; height: 16px; }
.pic_55 {background:url("/Content/Images/icon.png") -64px -32px; width: 16px; height: 16px; }
.pic_56 {background:url("/Content/Images/icon.png") -80px -32px; width: 16px; height: 16px; }
.pic_57 {background:url("/Content/Images/icon.png") -96px -32px; width: 16px; height: 16px; }
.pic_58 {background:url("/Content/Images/icon.png") -112px -32px; width: 16px; height: 16px; }
.pic_59 {background:url("/Content/Images/icon.png") -128px -32px; width: 16px; height: 16px; }
.pic_60 {background:url("/Content/Images/icon.png") -144px -32px; width: 16px; height: 16px; }
.pic_61 {background:url("/Content/Images/icon.png") -160px -32px; width: 16px; height: 16px; }
.pic_62 {background:url("/Content/Images/icon.png") -176px -32px; width: 16px; height: 16px; }
.pic_63 {background:url("/Content/Images/icon.png") -192px -32px; width: 16px; height: 16px; }
.pic_64 {background:url("/Content/Images/icon.png") -208px -32px; width: 16px; height: 16px; }
.pic_65 {background:url("/Content/Images/icon.png") -224px -32px; width: 16px; height: 16px; }
.pic_66 {background:url("/Content/Images/icon.png") -240px -32px; width: 16px; height: 16px; }
.pic_67 {background:url("/Content/Images/icon.png") -256px -32px; width: 16px; height: 16px; }
.pic_68 {background:url("/Content/Images/icon.png") -272px -32px; width: 16px; height: 16px; }
.pic_69 {background:url("/Content/Images/icon.png") -288px -32px; width: 16px; height: 16px; }
.pic_70 {background:url("/Content/Images/icon.png") -304px -32px; width: 16px; height: 16px; }
.pic_71 {background:url("/Content/Images/icon.png") -320px -32px; width: 16px; height: 16px; }
.pic_72 {background:url("/Content/Images/icon.png") -336px -32px; width: 16px; height: 16px; }
.pic_73 {background:url("/Content/Images/icon.png") -352px -32px; width: 16px; height: 16px; }
.pic_74 {background:url("/Content/Images/icon.png") -368px -32px; width: 16px; height: 16px; }
.pic_75 {background:url("/Content/Images/icon.png") -384px -32px; width: 16px; height: 16px; }
.pic_76 {background:url("/Content/Images/icon.png") -0px -48px; width: 16px; height: 16px; }
.pic_77 {background:url("/Content/Images/icon.png") -16px -48px; width: 16px; height: 16px; }
.pic_78 {background:url("/Content/Images/icon.png") -32px -48px; width: 16px; height: 16px; }
.pic_79 {background:url("/Content/Images/icon.png") -48px -48px; width: 16px; height: 16px; }
.pic_80 {background:url("/Content/Images/icon.png") -64px -48px; width: 16px; height: 16px; }
.pic_81 {background:url("/Content/Images/icon.png") -80px -48px; width: 16px; height: 16px; }
.pic_82 {background:url("/Content/Images/icon.png") -96px -48px; width: 16px; height: 16px; }
.pic_83 {background:url("/Content/Images/icon.png") -112px -48px; width: 16px; height: 16px; }
.pic_84 {background:url("/Content/Images/icon.png") -128px -48px; width: 16px; height: 16px; }
.pic_85 {background:url("/Content/Images/icon.png") -144px -48px; width: 16px; height: 16px; }
.pic_86 {background:url("/Content/Images/icon.png") -160px -48px; width: 16px; height: 16px; }
.pic_87 {background:url("/Content/Images/icon.png") -176px -48px; width: 16px; height: 16px; }
.pic_88 {background:url("/Content/Images/icon.png") -192px -48px; width: 16px; height: 16px; }
.pic_89 {background:url("/Content/Images/icon.png") -208px -48px; width: 16px; height: 16px; }
.pic_90 {background:url("/Content/Images/icon.png") -224px -48px; width: 16px; height: 16px; }
.pic_91 {background:url("/Content/Images/icon.png") -240px -48px; width: 16px; height: 16px; }
.pic_92 {background:url("/Content/Images/icon.png") -256px -48px; width: 16px; height: 16px; }
.pic_93 {background:url("/Content/Images/icon.png") -272px -48px; width: 16px; height: 16px; }
.pic_94 {background:url("/Content/Images/icon.png") -288px -48px; width: 16px; height: 16px; }
.pic_95 {background:url("/Content/Images/icon.png") -304px -48px; width: 16px; height: 16px; }
.pic_96 {background:url("/Content/Images/icon.png") -320px -48px; width: 16px; height: 16px; }
.pic_97 {background:url("/Content/Images/icon.png") -336px -48px; width: 16px; height: 16px; }
.pic_98 {background:url("/Content/Images/icon.png") -352px -48px; width: 16px; height: 16px; }
.pic_99 {background:url("/Content/Images/icon.png") -368px -48px; width: 16px; height: 16px; }
.pic_100 {background:url("/Content/Images/icon.png") -384px -48px; width: 16px; height: 16px; }
.pic_101 {background:url("/Content/Images/icon.png") -0px -64px; width: 16px; height: 16px; }
.pic_102 {background:url("/Content/Images/icon.png") -16px -64px; width: 16px; height: 16px; }
.pic_103 {background:url("/Content/Images/icon.png") -32px -64px; width: 16px; height: 16px; }
.pic_104 {background:url("/Content/Images/icon.png") -48px -64px; width: 16px; height: 16px; }
.pic_105 {background:url("/Content/Images/icon.png") -64px -64px; width: 16px; height: 16px; }
.pic_106 {background:url("/Content/Images/icon.png") -80px -64px; width: 16px; height: 16px; }
.pic_107 {background:url("/Content/Images/icon.png") -96px -64px; width: 16px; height: 16px; }
.pic_108 {background:url("/Content/Images/icon.png") -112px -64px; width: 16px; height: 16px; }
.pic_109 {background:url("/Content/Images/icon.png") -128px -64px; width: 16px; height: 16px; }
.pic_110 {background:url("/Content/Images/icon.png") -144px -64px; width: 16px; height: 16px; }
.pic_111 {background:url("/Content/Images/icon.png") -160px -64px; width: 16px; height: 16px; }
.pic_112 {background:url("/Content/Images/icon.png") -176px -64px; width: 16px; height: 16px; }
.pic_113 {background:url("/Content/Images/icon.png") -192px -64px; width: 16px; height: 16px; }
.pic_114 {background:url("/Content/Images/icon.png") -208px -64px; width: 16px; height: 16px; }
.pic_115 {background:url("/Content/Images/icon.png") -224px -64px; width: 16px; height: 16px; }
.pic_116 {background:url("/Content/Images/icon.png") -240px -64px; width: 16px; height: 16px; }
.pic_117 {background:url("/Content/Images/icon.png") -256px -64px; width: 16px; height: 16px; }
.pic_118 {background:url("/Content/Images/icon.png") -272px -64px; width: 16px; height: 16px; }
.pic_119 {background:url("/Content/Images/icon.png") -288px -64px; width: 16px; height: 16px; }
.pic_120 {background:url("/Content/Images/icon.png") -304px -64px; width: 16px; height: 16px; }
.pic_121 {background:url("/Content/Images/icon.png") -320px -64px; width: 16px; height: 16px; }
.pic_122 {background:url("/Content/Images/icon.png") -336px -64px; width: 16px; height: 16px; }
.pic_123 {background:url("/Content/Images/icon.png") -352px -64px; width: 16px; height: 16px; }
.pic_124 {background:url("/Content/Images/icon.png") -368px -64px; width: 16px; height: 16px; }
.pic_125 {background:url("/Content/Images/icon.png") -384px -64px; width: 16px; height: 16px; }
.pic_126 {background:url("/Content/Images/icon.png") -0px -80px; width: 16px; height: 16px; }
.pic_127 {background:url("/Content/Images/icon.png") -16px -80px; width: 16px; height: 16px; }
.pic_128 {background:url("/Content/Images/icon.png") -32px -80px; width: 16px; height: 16px; }
.pic_129 {background:url("/Content/Images/icon.png") -48px -80px; width: 16px; height: 16px; }
.pic_130 {background:url("/Content/Images/icon.png") -64px -80px; width: 16px; height: 16px; }
.pic_131 {background:url("/Content/Images/icon.png") -80px -80px; width: 16px; height: 16px; }
.pic_132 {background:url("/Content/Images/icon.png") -96px -80px; width: 16px; height: 16px; }
.pic_133 {background:url("/Content/Images/icon.png") -112px -80px; width: 16px; height: 16px; }
.pic_134 {background:url("/Content/Images/icon.png") -128px -80px; width: 16px; height: 16px; }
.pic_135 {background:url("/Content/Images/icon.png") -144px -80px; width: 16px; height: 16px; }
.pic_136 {background:url("/Content/Images/icon.png") -160px -80px; width: 16px; height: 16px; }
.pic_137 {background:url("/Content/Images/icon.png") -176px -80px; width: 16px; height: 16px; }
.pic_138 {background:url("/Content/Images/icon.png") -192px -80px; width: 16px; height: 16px; }
.pic_139 {background:url("/Content/Images/icon.png") -208px -80px; width: 16px; height: 16px; }
.pic_140 {background:url("/Content/Images/icon.png") -224px -80px; width: 16px; height: 16px; }
.pic_141 {background:url("/Content/Images/icon.png") -240px -80px; width: 16px; height: 16px; }
.pic_142 {background:url("/Content/Images/icon.png") -256px -80px; width: 16px; height: 16px; }
.pic_143 {background:url("/Content/Images/icon.png") -272px -80px; width: 16px; height: 16px; }
.pic_144 {background:url("/Content/Images/icon.png") -288px -80px; width: 16px; height: 16px; }
.pic_145 {background:url("/Content/Images/icon.png") -304px -80px; width: 16px; height: 16px; }
.pic_146 {background:url("/Content/Images/icon.png") -320px -80px; width: 16px; height: 16px; }
.pic_147 {background:url("/Content/Images/icon.png") -336px -80px; width: 16px; height: 16px; }
.pic_148 {background:url("/Content/Images/icon.png") -352px -80px; width: 16px; height: 16px; }
.pic_149 {background:url("/Content/Images/icon.png") -368px -80px; width: 16px; height: 16px; }
.pic_150 {background:url("/Content/Images/icon.png") -384px -80px; width: 16px; height: 
                       
                    
                    
 
                      





鲜花




握手




雷人




路过




鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
[译]IntroducingASP.NETvNextandMVC6发布时间：2022-07-10
下一篇：
asp.net身份验证发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap