• CSS实现下拉菜单和 Tab切换


    纯CSS下拉菜单也有好处,执行效率高,无需考虑客户端是否禁用了JS,定制样式也方便。问题是纯CSS的下拉菜单要支持各种浏览器,得写得好才行。

    IE6只支持a标签的hover伪类,并不支持li:hover这种,所以用条件注释把下拉菜单写进<a></a>标签中。
    就成这样了:

    XHTML代码改写成:

    <!--[if lte IE 6]><a href="#"><![endif]-->
    <dl>
    <dt>一级菜单</dt>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
    </dl>
    <!--[if lte IE 6]></a><![endif]-->

    CSS代码改写成:
    dd{
    display:none;
    }

    dl:hover dd,a:hover dd{
    display:block;
    }

    但IE6有:hover伪类在IE6中的BUG。可以给a:hover 加 border:0来解决,所以你代码里有a:hover{border:0;}这一句,再次改写成:

    dd{
    display:none;
    }

    dl:hover dd,a:hover dd{
    display:block;
    }

    a:hover{
    border:0;
    }

    此时在IE6中鼠标移动到上面下拉菜单OK了。但给每个菜单加上连接的时候,IE6里又不行了,为什么?不知道。会不会是如果不放在table中的话,浏览器在解析html代码的时候,会提前解析a标签呢?不确定。可能因为table的解析方式是里面内容解析完成后再显示的,反正不管什么原因,

    再给IE条件注释里的 a 标签里再套上一个表格,即XHTML代码改写成如下就OK了:

    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
    <dl>
    <dt><a href="#">一级菜单</a></dt>
    <dd><a href="#">二级菜单</a></dd>
    <dd><a href="#">二级菜单</a></dd>
    <dd><a href="#">二级菜单</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    这就是为什么最后弄了个这么一句话:<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->的原因。

    tab 切换

    <style type="text/css">
    dl {
    position:relative;
    240px;
    height:200px;
    }
    dt {
    position:absolute;
    left:-2px;
    top:-1.5em;
    }
    dt a {
    display:block;
    float:left;
    margin:1px;
    78px;
    text-align:center;
    font:bold 12px/1.8em "宋体", sans-serif;
    color:#fff;
    text-decoration:none;
    background:#666;
    }
    dt a:hover {
    background:orange;
    }
    dd {
    margin:0;
    240px;
    height:200px;
    overflow:hidden;
    border:1px solid #999;
    }
    ul {
    margin:0;
    padding:6px 0;
    240px;
    height:200px;
    list-style:none;
    }
    li {
    230px;
    font:12px/1.8em "宋体", sans-serif;
    white-space:nowrap;
    overflow:hidden;
    }
    </style>
    </head>
    <body>
    <br />
    <br />
    <dl>
    <dt><a href="#a" title="">电影</a><a href="#b" title="">电视</a><a href="#c" title="">动漫</a></dt>
    <dd>
        <ul id="a">
          <li>·<a href="" title="">电影</a></li>
          <li>·<a href="" title="">电影</a></li>
          <li>·<a href="" title="">电影</a></li>
          <li>·<a href="" title="">电影</a></li>
          <li>·<a href="" title="">电影</a></li>
        </ul>
        <ul id="b">
          <li>·<a href="" title="">电视</a></li>
          <li>·<a href="" title="">电视</a></li>
          <li>·<a href="" title="">电视</a></li>
          <li>·<a href="" title="">电视</a></li>
          <li>·<a href="" title="">电视</a></li>
        </ul>
        <ul id="c">
          <li>·<a href="" title="">动漫</a></li>
          <li>·<a href="" title="">动漫</a></li>
          <li>·<a href="" title="">动漫</a></li>
          <li>·<a href="" title="">动漫</a></li>
          <li>·<a href="" title="">动漫</a></li>
        </ul>
    </dd>
    </dl>

    第二种实现

    <style>
    * {margin:0; padding:0;}
    ul {list-style:none;margin:100px; }
    li { float:left; 80px;   font-size:12px; border:#CCC solid 1px; padding:3px;}
    li a {display:block; position:relative; text-decoration:none; text-align:center;}
    li span {display:none; }
    li a:hover span {display:block; margin:0px; 320px; height:200px; position:absolute; top:18px; color:#fff; }
    #s1 {left:-28px; background:#c00;   }
    #s2 {left:-102px; background:#00F   }
    #s3 {left:-188px; background:#3F3;   }
    #s4 {left:-256px; background:#000;   }
    </style>
    <ul>
    <li><a href="#" title="">电影<span id="s1">电影.....</span></a></li>
    <li><a href="#" title="">电视剧<span id="s2">电视剧.....</span></a></li>
    <li><a href="#" title="">动漫<span id="s3">动漫.....</span></a></li>
    <li><a href="#" title="">全部排行<span id="s4">全部排行....</span></a></li>
    </ul>

  • 相关阅读:
    css3
    ubuntu /mac 终端命令大全
    MarkDown的语法的简要规则
    向github上传一个项目
    datatable 去掉默认功能
    datatable 自定义筛选
    vuex
    es6入门教程
    datatable 指定添加排序,根据列的值来设置颜色
    在ios上块点击出现闪黑底
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400189.html
Copyright © 2020-2023  润新知