CSS3实现动态多级菜单效果

最新推荐文章于 2024-07-04 10:00:00 发布

Jack-小俊

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css3 浏览器

本文链接：https://blog.csdn.net/garvisjack/article/details/54810010

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以下是用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>