CSS3实现二级菜单

Posted 2022-12-11 wukongk

今天看了一个demo，原demo虽说是CSS3实现，但其中也使用了js，再一个里面的代码有些地方，我觉得还可以优化 ，所以自己就尝试着用css3实现一下

我想说: 不论写一个多么炫酷的demo，z-index的值都最好不要超过2

下面是源码：

html部分

<div class="sidebar">
        <h1><i class="fa fa-bars push"></i>Animated <span class="color">Menu</span></h1>
        <ul>
            <li><a href="#"><i class="fa fa-dashboard push"></i>Dashboard<i class="fa fa-angle-right"></i></a><span class="hover"></span>
            </li>
            <li><a href="#"><i class="fa fa-user push"></i>Users<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Add User<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Manage Users<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog push"></i>Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Dashboard Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Profile Settings<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">Manage Menu<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                    <li><a href="#">User Profiles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-picture-o push"></i>appearance<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Change Theme<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                    </li>
                    <li><a href="#">Theme Options<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-file push"></i>Information<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                <ul class="sub-menu">
                    <li><a href="#">Latest News<i class="fa fa-angle-right"></i></a><span class="hover"></span>
                    </li>
                    <li><a href="#">Recent Articles<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-plane push"></i>Contact<i class="fa fa-angle-right"></i></a><span class="hover"></span></li>
        </ul>
    </div>

css部分

* 
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei"
        
        a 
            color: #000;
            text-decoration: none;
        
        ul 
            list-style: none
        
        i 
            margin-right: 15px;
        
        html,body 
            background-color: #808080;
            height: 100%;
        
        .sidebar 
            background: url(img/menu_pattern_1.png);
            width: 200px;
            height: 100%;
            border-right: 10px solid #d00355;
            color: #fff;
            padding-left: 40px;
        
        .sidebar h1 
            font-size: 16px;
            height: 80px;
            line-height: 80px;
        
        .sidebar h1 .color 
            color: #d00355;
        
        .sidebar ul li 
            padding: 8px;
        
        .sidebar ul li a 
            color: #6B6363;
            position: relative;
            z-index: 1;
        
        .sidebar ul li a .fa-angle-right 
            position: absolute;
            left: 160px;
            top: 4px;
        
        .sidebar ul li .hover 
            display: block;
            position: absolute;
            width: 0;
            height: 37px;
            margin-top: -30px;
            margin-left: -8px;
            z-index: 0;
            background-color: #d00355;
            opacity: 0;
            transition: all .5s .1s;
        
        .sidebar ul li .sub-menu 
            display: block;
            background: url(img/menu_pattern_1.png);
            position: absolute;
            margin-left: 192px;
            margin-top: -31px;
            width: 200px;
            opacity: 0;
        
        .sidebar > ul > li:hover ul 
            opacity: 1;
        
        .sidebar ul li:hover .hover 
            width: 200px;
            opacity: 1;
        
        .sidebar > ul > li:hover a
            color: #fff;
        

1、在li标签中有两个元素，a标签和span标签，对于span标签，我使用了绝对定位，当然这个绝对定位和平常使用的绝对定位元素是不一样的，因为在li标签上没有相对定位这个属性，这个小技巧是来源于一个博客。而a标签中的class为fa-angle-right使用了绝对定位，与span标签是一种想法，a标签上我也不想给它加上相对定位这个包袱。可是，问题出现了，无论我怎样调整a标签和span标签的z-index，span标签都会把a标签给盖住，去网上搜了一下解决办法，于是给a加上了绝对定位这个属性，于是可以达到我想要的效果了，所以我就把fa-angle-right的属性改为了平常使用的绝对定位。。。真是不甘心呀。。

2、对于class为sub-menu的ul中的span，当我将鼠标滑过li标签时，li标签会出现span的宽度由0到200的效果，但是class为sub-menu的ul中的span却不会出现类似的效果，在测试时，如果将sub-menu的display属性设置为block，那麽滑过相应的li时，sub-menu中的span会出现想要的效果，当时很是着急，想来想去，问题可能出现在display这个属性上，虽然找不到具体的原因是什么，只能找对应的解决办法，有其他的属性，可以让一个元素从无变有吗？有opcity属性，于是将display的变化，改为了opcity的变化，想要的效果就出现了，用display，出现不了想要的效果，得原因是什么？需要去查查。。。

PS：css未做前缀的处理，所有的测试在最新版本的谷歌浏览器下进行

补充：

修改一下二级菜单中的字体大小，

text-transform 属性控制文本的大小写，值none/capitalize/uppercase/lowercase/inherit