09/14
2015
superfish是一个jQuery插件，可以用来制作多级下拉菜单。来看看是怎么用的：
首先引入所需的文件：
1 2 3 | <link href="/f/superfish.css" rel="stylesheet"><script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script><script src="/f/superfish.js"></script> |
引用的superfish.css只是负责样式表现的，我建议引入，然后自己覆盖规则来修改。
html结构则使用ul和li来编制层次：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <ul class="sf-menu"> <li> <a href="">动漫<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="">龙与虎</a></li> <li><a href="">fate</a></li> </ul> </li> <li> <a href="">人物<span class="sf-sub-indicator"> »</span></a> <ul> <li> <a href="">夏娜<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="">出自灼眼的夏娜</a></li> <li> <a href="">名字叫傻娜<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="">其实是shana</a></li> </ul> </li> </ul> </li> <li> <a href="">saber<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="">本名阿尔托莉雅</a></li> <li><a href="">武器为石中剑和湖中间</a></li> <li><a href="">吃我EX咖喱棒！</a></li> </ul> </li> <li> <a href="">六花<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="">中二的典范</a></li> <li><a href="">六花最可爱了</a></li> </ul> </li> </ul> </li></ul> |
ul的class不是必须用这个指定的，用这个只是为了使用superfish.css里面的规则。如不需要可以改成别的。span标签用来提醒用户这里有子菜单，也可以随意删改。主要的部分只需要ul和li的结构。
最后调用superfish：
1 2 3 4 5 | <script type='text/javascript'> $(document).ready(function() { $('sf-menu').superfish(); });</script> |
使用superfish制作多级下拉菜单
-
Internet Explorer 9
Windows 7 -
Firefox 40
Android 不就打错了一个字吗(╯°口°)╯(┴—┴
回复
-
中文备注写错辣！！ 武器为石中剑和湖中剑！！！【然而只能看懂中文_(:3」∠)_