通过本文主要向大家介绍了分类导航菜单,分类导航等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中.
(1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口.
(2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把 <a> 元素设 display 属性设置成 inline-block .这在大多数浏览器中都有效. 针对IE7 可以加入下面一段条件注释来达到同样效果
(1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口.
(2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把 <a> 元素设 display 属性设置成 inline-block .这在大多数浏览器中都有效. 针对IE7 可以加入下面一段条件注释来达到同样效果