伸缩菜单栏

最新推荐文章于 2022-06-24 17:55:17 发布

LHarashi

最新推荐文章于 2022-06-24 17:55:17 发布

阅读量352

点赞数

分类专栏：页面布局文章标签： css html css3

本文链接：https://blog.csdn.net/LHarashi/article/details/115520148

版权

页面布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

极简版：

导航栏按平常的div+ul+li+a进行嵌套书写；
因我写的箭头是用小正方形的边框来代替的，所以的我a标签尾部有个空盒子；
然后将子菜单的内容以自定义列表添加至a标签后；
到这基本的骨架就好了，剩下的效果为css的工作
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易伸缩菜单</title>
    <link rel="stylesheet" href="d4.css" type="text/css">
</head>
<body>
<div class="nav">
        <ul>
            <li><a href="#">首页 </a></li>
            <li>
                <a href="#">
                    车票
                    <div></div>
                </a>
                <dl>
                    <dt>购买</dt>
                    <dd><a href="#">单程</a></dd>
                    <dd><a href="#">接续换乘</a></dd>
                    <dd><a href="#">往返</a></dd>
                    <dd><a href="#">计次·定期票</a></dd>
                    <dt>变更</dt>
                    <dd><a href="#">退票</a></dd>
                    <dd><a href="#">变更到站</a></dd>
                    <dd><a href="#">改签</a></dd>
                    <dd></dd>
                    <dt>更多</dt>
                    <dd><a href="#">中铁银通卡</a></dd>
                    <dd><a href="#">市郊快速铁路</a></dd>
                    <dd><a href="#">广九直通车</a></dd>
                    <dd><a href="#">国际列车</a></dd>
                </dl>
            </li>
            <li>
                <a href="#">
                    团购服务
                    <div></div>
                </a>
                <dl>
                    <dd><a href="#">务工人员</a></dd>
                    <dd><a href="#">学生团体</a></dd>
                </dl>
            </li>
            <li>
                <a href="#">
                    会员服务
                    <div></div>
                </a>
                <dl>
                    <dd><a href="#">会员管理</a></dd>
                    <dd><a href="#">积分账户</a></dd>
                    <dd><a href="#">积分兑换</a></dd>
                    <dd><a href="#">会员专享</a></dd>
                    <dd><a href="#">会员中心</a></dd>
                </dl>
            </li>
            <li>
                <a href="#">
                    站车服务
                    <div></div>
                </a>
                <dl>
                    <dd><a href="#">重点旅客预约</a></dd>
                    <dd><a href="#">遗失物品查找</a></dd>
                    <dd><a href="#">便民托运</a></dd>
                    <dd><a href="#">动车组介绍</a></dd>
                    <dd><a href="#">共享汽车</a></dd>
                    <dd><a href="#">定制接送</a></dd>
                    <dd><a href="#">车站引导</a></dd>
                    <dd><a href="#">站车风采</a></dd>
                </dl>
            </li>
            <li>
                <a href="#">
                    商旅服务
                    <div></div>
                </a>
                <dl>
                    <dd><a href="#">餐饮·特产</a></dd>
                    <dd><a href="#">旅游</a></dd>
                    <dd><a href="#">保险</a></dd>
                    <dd><a href="#">雪具快运</a></dd>
                </dl>
            </li>
            <li>
                <a href="#">
                    出行指南
                    <div></div>
                </a>
            </li>
            <li>
                <a href="#">
                    信息查询
                    <div></div>
                </a>
            </li>
        </ul>
</div>
</body>
</html>

css样式如下：

*{
    margin: 0;
    padding: 0;
}
/*导航栏*/
.nav{
    position: relative;
    top: 15px;
    width: 100%;
    height: 34px;
    background: #3b99fc;

    display:inline-block;
    -webkit-box-shadow:1px 1px 3px #292929;
}
.nav ul{
    width: 100%;
    /*z-index: 3;*/
}
.nav ul li {
    padding: 5px 0 6px 0;
    width: 12.5%;
    text-align: center;
}
/***/
.nav li{
    list-style:none;
    float:left;
    position: relative;
}
.nav li:hover{
    background:#2676e3;
    -webkit-transition: background 1s ease-out;
}
.nav li a{
    display:block;
    font-size:12px;
    color:#fff;
    text-decoration:none;
    -webkit-border-top-left-radius: 2px;
}
.nav li > a{
    position:relative;
}
.nav div{
    position: relative;
    float: left;
    top: -18px;
    left: 0px;
    width: 100%;
    height:30px;
}
/*箭头*/
.nav div::after{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    top: 4px;
    right: 8px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    transform: rotate(45deg);
    /* 转换中心点 */
    transform-origin: 75% 75%;
    transition: all 0.1s;
}
.nav div:hover::after {
    transform: rotate(225deg);
}
/*子菜单的点击效果*/
.nav dl a:hover{
    color:#FFF;
    background:#999E9F;
}
.nav dt{
    display:none;
    margin-top:0px;
    padding-top:15px;
    height:20px;
    text-align: left;
    color: #3357ff;
}
.nav dd{
    /*运用margin负值的效果将自定义列表向上缩进盒子里，并设置为完全透明*/
    margin-top:-40px;
    opacity: 0;
    width:145px;
}
/*设置当鼠标经过所在自定义列表所在的父盒子时，位置回归导航栏的下方，并设置为完全不透明*/
.nav li:hover dd{
    margin-top:0;
    opacity:1;
}