css写菜单：简洁注释版

这里是简洁版，主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究。
主要是利用了a:hover[ie]，li:hover[非ie]的状态来做出显示/隐藏菜单的效果。
关键之处：
 程序代码
<!--[if IE 7]><!--></a><!--<![endif]-->
这一段注释表示：只有非IE浏览器和IE7才能读取到 </a>
这样在非IE浏览器及IE7版本的浏览器中读取到的html是：
 程序代码
<li><a href="#">导航</a>
     <ul><li>二级导航</li></ul>
</li>
 程序代码
<!--[if lte IE 6]></a><![endif]-->
这一段注释代表：只有IE6以及IE6以下版本的浏览器才能读取到 </a>
而在IE6以及IE6以下版本的浏览器中读取到的html就是：
 程序代码
<li><a href="#">导航
     <ul><li>二级导航</li></ul>
     </a>
</li>
有些朋友可能要问：为什么要搞的那么复杂，而不都用链接来包含二级列表呢，那样就只用写a:hover就可以了，代码简单多了。
我个人觉得：
玩标准就要尽可能的去遵循语义。
在IE6以及以下版本中由于不支持a以外标记的hover伪类，所以目前来说只有这个办法能达到类似的目的，对着IE6...只好放弃语义了。
但我们可不要为了一个IE6而坏了整锅汤哦，所以有些事情虽然麻烦了点，但还是要做的~

纯CSS菜单

  • 首页

    • 111112
    • 111112
    • 111112
  • 导航2
    • 222221
    • 222221
    • 222221
  • 导航3
    • 333331
    • 333331
    • 333331
  • 导航4
    • 444441
    • 444441
    • 444441
  • 导航5
    • 555551
    • 555551
    • 555551
  • 导航6
    • 666661
    • 666661
    • 666661

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

注意里面是分段的，[ 随意发挥 ] 。俺先来发挥一下~ （原先没注意兼容，现在兼容了...）

纯CSS菜单

  • 首页

    • 111112
    • 111112
    • 111112
  • 导航2
    • 222221
    • 222221
    • 222221
  • 导航3
    • 333331
    • 333331
    • 333331
  • 导航4
    • 444441
    • 444441
    • 444441
  • 导航5
    • 555551
    • 555551
    • 555551
  • 导航6
    • 666661
    • 666661
    • 666661

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • css写菜单：简洁注释版

    这里是简洁版,主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究. 主要是利用了a:hover[ie],li:hover[非ie]的状态来做出显示/隐藏菜单的效果. 关键之处:  程序代码 <!--[if IE 7]><!--></a><!--<![endif]--> 这一段注释表示:只有非IE浏览器和IE7才能读取到 </a> 这样在非IE浏览器及IE7版本的浏览器中读取到的html是:  程序代码 <li><a hr

  • 以前写的两个CSS树形菜单

    第一次写的CSS树形菜单比较简单,只有二级目录,javascript代码总共不到十行,主要是靠CSS中的包含写法来实现的.演示地址:(1)http://www.cnlei.org/mycode/csstreemenu/index.html(2)http://cnlei.iecn.net/mycode/csstreemenu/index.html下载链接:(1)http://www.cnlei.org/mycode/csstreemenu/csstreemenu.rar(2)http://cnle

  • 把JS与CSS写在同一个文件里的书写方法

    我们经常把多个CSS或者多个JS并成一个,以节省请求,但是这样最少还是要两个.在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里,那怎样做呢?利用注释,先看一下这代码.  <!-- /* window.onload=function(){ document.getElementById("test2").innerHTML="传说中滴JS测试者.如果你看到我,那<strong>JS</strong>也生效了"; } &l

  • JS 俄罗斯方块完美注释版代码

    R #board tr td{ width: 20px; height: 20px; } /** * JS俄罗斯方块完美注释版 v 1.01 * 从学c语言那一会儿都想写一个俄罗斯方块,可是每次动起手总觉得难度太大. * 今天终于用了大约4个小时写出来了. 其中在涉及到方块变型的时候还咨询了 * 同学来帮忙; * * 个人觉得难点有这么几个: * 1: 边界检查, 不多说, 想通了就行 * 2: 旋转, 还是数学上的方法, 一个点相对另外一个点旋转90度的问题. * 4: 让整个程序在点开始之后

  • JS连连看源码完美注释版(推荐)

    闲来无事,也写一个javascript连连看,注释比较完整,想学的朋友可要看了. 连连看最难的部分应该是路径搜索,即鼠标点的两点之间看有无可通的路径. 看过有人写的递归写法,心里痒痒,就捉摸了一下,发现不用递归的情况下难度也不大. 路径搜索由简到难分析,先分析一条直线上是否可直线连通,再分析一条直线上的两点通过拐两个弯是否可通,最后分析不在一条直线上的情况. 在IE6, IE8, firefox3.0.3下测试过. 复制代码 代码如下: <html><head><meta h

  • Android uses-permission权限列表中文注释版

    android同时也限定了系统资源的使用,像网络设备,SD卡,录音设备等.如果你的应用希望去使用任何系统资源,我们必须去申请Android的权限.这就是<uses-permission>元素的作用. 一个权限通常有以下格式,用一个名字为name 的字符串去指导我们希望使用的权限. 复制代码 代码如下: <uses-permission android:name="string"/> 例如:想要获得networking APIs的使用权限,我们指定如下的元素作为

  • css 二级菜单 实现代码集合 修正版

    css 二级菜单 实现代码集合 修正版

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • 效果直逼flash的Div+Css+Js菜单

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • Div+Css(+Js)菜单代码及制作工具

    Div+Css(+Js)菜单代码及制作工具

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • dl,dt,dd制作的CSS垂直菜单

    感觉跟ul和li有点类似,不过也算是一种新思路,源码如下: dl,dt,dd制作的CSS垂直菜单 #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-we

随机推荐