61,111
社区成员
发帖
与我相关
我的任务
分享[接着散分]纯CSS无限级下拉菜单
转载请注明出处，css探索之旅-飘零雾雨的庄园
前几天翻出以前写的一个纯CSS仿微软经典菜单，现在看来才感叹，微软的经典菜单确实很经典，至少看起来不觉得厌烦。
感叹归感叹，想想既然可以实现下拉菜单了，那么无限级下拉菜单理论上也是可以实现的，看了下之前的代码结构，马上肯定了这个理论。当然这完全归功于伟大的子选择符，形如：E>F，遗憾的是IE6并不支持子选择符，甚为郁闷，不过也不用放弃，可以换个解决方案。
一般来说无限级只是一种“存在状态”，但其实我们会用到的“并不会是无限”，而是有限的一定级数，比如说7级，8级，或更多一点，因为超出屏幕就没多少实际意义了，并且实际情况也比较少会出现那么深的层次关系。
无限级在非IE下是可以很简单就实现的，IE6也并非不能实现，只是稍微繁琐的，且不是“智能”的实现，而是通过“预设”，比如你预计最多只会出现6级的下拉菜单，那么预设10级应该就足够适应那些不确定因素了。所以前面我才会说无限级其实只是一种“存在状态”，我们所用到的并不会是无限的。
趁着一会的空闲，动手改造了一下原有的css样式文件。来看实例：
[纯CSS无限级下拉菜单实例：http://www.doyoe.com/model/xhtmlcss/menu/menu1/3.htm]
相关阅读：
[纯CSS仿微软经典菜单实例]
[纯CSS打造的下拉菜单横向实例]
[纯CSS打造的下拉菜单纵向实例]
前几天翻出以前写的一个纯CSS仿微软经典菜单，现在看来才感叹，微软的经典菜单确实很经典，至少看起来不觉得厌烦。
感叹归感叹，想想既然可以实现下拉菜单了，那么无限级下拉菜单理论上也是可以实现的，看了下之前的代码结构，马上肯定了这个理论。当然这完全归功于伟大的子选择符，形如：E>F，遗憾的是IE6并不支持子选择符，甚为郁闷，不过也不用放弃，可以换个解决方案。
一般来说无限级只是一种“存在状态”，但其实我们会用到的“并不会是无限”，而是有限的一定级数，比如说7级，8级，或更多一点，因为超出屏幕就没多少实际意义了，并且实际情况也比较少会出现那么深的层次关系。
无限级在非IE下是可以很简单就实现的，IE6也并非不能实现，只是稍微繁琐的，且不是“智能”的实现，而是通过“预设”，比如你预计最多只会出现6级的下拉菜单，那么预设10级应该就足够适应那些不确定因素了。所以前面我才会说无限级其实只是一种“存在状态”，我们所用到的并不会是无限的。
趁着一会的空闲，动手改造了一下原有的css样式文件。来看实例：
[纯CSS无限级下拉菜单实例：http://www.doyoe.com/model/xhtmlcss/menu/menu1/3.htm]
相关阅读：
[纯CSS仿微软经典菜单实例]
[纯CSS打造的下拉菜单横向实例]
[纯CSS打造的下拉菜单纵向实例]
...全文
请发表友善的回复…
发表回复
waitwinrandy 2012-07-25
- 打赏
- 举报
很好，怎么没有源代码。
小米哥Gui林 2011-11-27
- 打赏
- 举报
呵呵，好玩...
PotentialStock 2011-09-20
- 打赏
- 举报
jf,顶楼主
shanda9727 2011-07-25
- 打赏
- 举报
不错，俺来接分滴~
swggws168 2011-07-22
- 打赏
- 举报
好东西 ，我只有先JF再慢慢消化了
wleexi 2011-06-30
- 打赏
- 举报
学习了。
下载了。
下载了。
Beagle4ce 2011-03-24
- 打赏
- 举报
不错不错，呵呵呵，谢谢LZ，终于知道怎么坐无限级下拉菜单了
tykao_cyj 2010-09-23
- 打赏
- 举报
楼主确实很犀利 我改了半天都搞不过来 佩服
chalewen 2010-09-11
- 打赏
- 举报
好东西，mark
mooneclipse 2010-08-28
- 打赏
- 举报
但是楼主没有给出源码分析..
lcwen 2010-08-28
- 打赏
- 举报
可惜没代码
前端小小菜 2010-05-19
- 打赏
- 举报
楼主高手。。。经典啊 收藏~
Comdy 2010-04-29
- 打赏
- 举报
很好，很不错
越影l 2010-03-31
- 打赏
- 举报
学习了，有时间练习练习
lgf11088 2010-01-28
- 打赏
- 举报
呵呵 xie xie
futurekiss2008 2009-12-07
- 打赏
- 举报
sc
gates321 2009-12-07
- 打赏
- 举报
强烈喜欢。。。
leonxun007 2009-07-16
- 打赏
- 举报
hehe<不错～
jarik 2009-07-03
- 打赏
- 举报
哈，很强悍啊！！
程序猿之殇 2009-06-30
- 打赏
- 举报
[Quote=引用 12 楼 lion98 的回复:]
反映有点太灵敏了！！！
[/Quote]
同感
反映有点太灵敏了！！！
[/Quote]
同感
加载更多回复（135）
