CSS3实现动态多级菜单效果

来源：互联网发布：java redis isinmulti 编辑：程序博客网时间：2024/05/22 01:33
以下是用CSS3的新特性做的三级菜单系列的效果，在不考虑兼容性的情况下，IE9以上的浏览器，火狐谷歌都可以流畅显示。
对应IE6，7，8来说，动态效果会没有，还需要再做一些HACK处理才行。
代码复制粘贴，即可使用
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3实现动态菜单</title></head><style type="text/css">/*公共样式*/*{    margin: 0;    padding: 0;}ul{    list-style: none;}a{    text-decoration: none;    color: #fff;    display: block;}.clearfix{    zoom: 1;}.clearfix:after{    content: " ";    display: block;    clear: both;    height: 0;    visibility:hidden;}/*主要样式*/#nav{    width: 550px;    margin: 20px auto;    overflow: hidden;}#menu{    width: 550px;    height: 150px;}#menu li{    float: left;    width: 100px;    height: 36px;    margin-right: 2px;    border-radius: 4px;    color:#fff;    text-align: center;    line-height: 36px;    box-shadow: 0 2px 1px #333,0 2px 1px #666;    background-color: #ddd;    background-image: linear-gradient(#33a6b8,#0089a7);}#menu li:hover{    border-radius: 4px;    background-color: #456;    background-image: linear-gradient(#346,#135);}/*这边利用CSS3的transition过渡效果，配合hover一起使用*/#menu li ul{    position: relative;    visibility: hidden;    box-shadow: 0 2px 1px rgba(255,255,255,.3);    opacity: 0;    margin-top: 8px;    transition:all .3s;}#menu li:hover>ul{    opacity: 1;    margin-top: 0;    visibility: visible;}#menu li ul li ul{    position: absolute;    left: 102px;    top: 0px;}#menu li ul li{    margin-top:1px;    box-shadow: 0 2px 1px #0d5661,0 2px 1px #0c4842;}/*制作一个小的三角形效果*/#menu li ul li:first-child:before{    content: "";    width: 0;    height: 0;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-bottom: 6px solid #456;    position: absolute;    top: -6px;    left: 44px;}#menu li ul li ul li:first-child:before{    content: "";    width: 0;    height: 0;    border-left: 6px solid transparent;    border-right: 6px solid #456;    border-top: 6px solid transparent;    border-bottom: 6px solid transparent;    position: absolute;    left: -12px;    top:12px;}</style><body>    <div id="nav">        <ul id="menu" class="clearfix">            <li>                <a href="">博客首页</a>                <ul>                    <li>个人资料 +                    <ul>                    <li>小明同学</li>                    <li>小红同学</li>                    <li>小绿同学</li>                    </ul>                    </li>                    <li>发布博文</li>                    <li>最近动态</li>                </ul>            </li>            <li>                <a href="">内容管理</a>                <ul>                    <li>新手日记 +                    <ul>                    <li>今日记录</li>                    <li>活动内容</li>                    <li>心情感悟</li>                    </ul>                    </li>                    <li>项目资源</li>                    <li>资源库</li>                </ul>            </li>            <li>                <a href="">类别管理</a>                <ul>                    <li>HTML5 +                    <ul>                    <li>标签</li>                    <li>属性</li>                    <li>表单操作</li>                    </ul>                    </li>                    <li>CSS3  +                    <ul>                    <li>选择器</li>                    <li>伪元素</li>                    <li>动态效果</li>                    </ul>                    </li>                    <li>Javascript</li>                </ul>            </li>            <li>                <a href="">评论管理</a>                <ul>                    <li>大神评论</li>                    <li>网友点评</li>                    <li>我的粉丝</li>                </ul>            </li>            <li>                <a href="">草稿箱</a>                <ul>                    <li>昨天记录</li>                    <li>今天活动</li>                    <li>明天展望</li>                </ul>            </li>        </ul>    </div></body></html>
0 0