乐趣区

关于css:HTMLulli实现竖向菜单栏

jiezi


(图片地址：https://panjiachen.github.io/…)
如图示这种竖向排列的菜单栏，展现成果比拟好，而且交互比拟直观，上面来介绍一下实现步骤
1. 先把整体布局写进去
1.1 因为子菜单开展膨胀会变动 div 大小，所以应用 flex 弹性盒子。

<div class="box">
    <ul class="ulList">
        <li class="liList">
            <p onclick="menu_active(ulOne)"> 这是第一个子菜单 </p>
            <ul class="childUl" id="ulOne" style="display: none;">
                <li> 选项 1.1</li>
                <li> 选项 1.2</li>
            </ul>
        </li>
        <li class="liList">
            <p onclick="menu_active(ulTwo)"> 这是第二个子菜单 </p>
            <ul class="childUl" id="ulTwo" style="display: none;">
                <li> 选项 2.1</li>
                <li> 选项 2.2</li>
            </ul>
        </li>
        <li class="liList">
            <p onclick="menu_active(ulThree)"> 这是第三个子菜单 </p>
            <ul class="childUl" id="ulThree" style="display: none;">
                <li> 选项 3.1</li>
                <li> 选项 3.2</li>
                <li> 选项 3.3</li>
            </ul>
        </li>
        <li class="liList">
            <p onclick="menu_active(ulFour)"> 这是第四个子菜单 </p>
            <ul class="childUl" id="ulFour" style="display: none;">
                <li> 选项 4.1</li>
            </ul>
        </li>
    </ul>
</div>
    
*{
    margin: 0;
    padding: 0;
}
.box{
    width: 300px;
    top: 10%;
    left: 10%;
    display: flex;
    position: absolute;
}
.ulList{
    width: 100%;
    display: flex;
    left: 20%;
    top: 20%;
    flex-direction: column;
    background-color: grey;
    position: absolute;
    list-style: none;
}
.liList{
    width: 100%;
    height:100px;
    display: flex;
    flex-direction: column;
    background-color: #FF9900;
    position: relative;
}
.liList p{
    font-size: 20px;
    text-align: center;
}

1.2 先把子菜单下的 ul 暗藏。
这里要留神一点：list-style 设置为 none 时，会发现 li 前边的点尽管隐没了，但还是占着空间，如下图所示

呈现此起因是因为默认状况下，li 是有 margin 和 padding 的，此时只须要给其设置都为 0 即可，为了不便，间接全局批改：

*,body{
    margin: 0;
    padding: 0;
}

1.3 给一级 ul 设置了 flex，其下的每一个选项下的子菜单栏是不须要再设置 flex 的，只须要给每一个 ul 设置宽度，而后每一个 li 设置雷同用的高度和宽度即可。

.liList ul{
    width: 100%;
    position: relative;
}
.liList ul li{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #FF4400;
    list-style: none;
    text-align: center;
    position: relative;
}

2. 给每一个菜单选项增加点击事件，抉择开展或者暗藏子菜单
这里应用到抉择语句进行判断

function menu_active(ulId){if(ulId.style.display == "none"){ulId.style.display = "block"}else{ulId.style.display = "none"}
}

写到这里，代码根本写完了，那就渲染一下看看成果


诶？为什么成果和我想得不一样？
这里会发现二级菜单展现的时候，会被一级菜单笼罩掉。认真寻找后发现问题出在高度设置上

.liList{
    width: 100%;
    line-height: 80px;
    display: flex;
    flex-direction: column;
    background-color: #FF9900;
    position: relative;
}

给每一个一级菜单设置了一个 100px 的高度！这就使得无论怎么改变二级菜单，始终是和一级菜单抵触的，把它去掉就好了。

好啦，一个应用 ul 列表的竖向菜单栏就做好了✌！
当然你也能够本人渲染的更好看一些✌✌✌
后续如果要给每一个菜单选项增加链接的话也是不难的。

–2022.3.26 21:44

退出移动版