新站提交
  • 网站:738
  • 待审:0
  • 小程序:15
  • 文章:24478
2021服务器优惠

阿里云:2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...
腾讯云:云产品限时秒杀,爆款1核2G云服务器,首年74元 更多...

本文将要介绍的是一款具有伸缩过渡效果的二级导航菜单,该菜单使用纯CSS实现,代码较少,修改容易,如果你喜欢此菜单的效果,那么可以直接下载本实例修改使用,方便快捷。

demodownload

HTML

<div class="nav">
    <ul class="first">
        <li>一级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>二级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>三级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
<div class="content"></div>

HTML使用一个DIV标签作为菜单盒子模型,其class值是nav

菜单列表(一级和二级)均使用ul li标签,一级菜单ulclass值是first,二级菜单ulclass值是second

CSS

.nav {
    width: 600px;
    height: 50px;
    margin: 100px auto;
    background-color: yellow;
}

.content {
    width: 600px;
    height: 250px;
    margin: -100px auto;
    background-color: red;
}

.nav .first>li {
    width: 200px;
    height: 50px;
    list-style: none;
    line-height: 50px;
    float: left;
    text-align: center;
}

.second li {
    list-style: none;
    background-color: pink;
    transform: rotateY(-90deg);
    transition-duration: 1s;
    opacity: 0;
    position: relative;
}

.first>li:hover .second li {
    transform: none;
    opacity: 1;
}

.second li:nth-child(1) {
    transition-delay: 0ms;
}

.second li:nth-child(2) {
    transition-delay: 100ms;
}

.second li:nth-child(3) {
    transition-delay: 200ms;
}

.second li:nth-child(4) {
    transition-delay: 300ms;
}

.second li:nth-child(5) {
    transition-delay: 400ms;
}

CSS代码不多,并且也不难理解,.nav{}定义菜单的高、宽、背景颜色等属性。

.nav .first>li{}定义一级菜单的高、宽、列表样式、行高等属性。

.second li{}定义二级菜单的列表样式、背景颜色等属性,这里定义了transform: rotateY(-90deg);的过渡动画属性,沿Y轴转动90度,transition-duration: 1s;是定义动画时间为1s

nth-child(n) n的值是1-5,代表是5个二级菜单项。如果你有多于5个二级菜单项,则参考实例代码增加相应的nth-child(n)属性,需要注意的是transition-delay是以100ms递增的。

总结

本文介绍了纯CSS实现二级导航菜单(具有伸缩过渡效果),代码精炼易理解易修改,如果喜欢该菜单,可以直接下载实例代码修改使用。

您可能对以下文章也感兴趣

  • CSS实现Menu Toggle移动菜单切换按钮(打开/关闭)
  • 漂亮的左侧二级导航菜单(伸缩式)【演示/源码下载】
  • CSS JS:一款常见的简单大方又实用的移动网页(二级)菜单设计
  • 3款有下横线平滑过渡效果的导航栏菜单
  • 非常漂亮的响应式导航栏设计
  • 简单实用的响应式导航菜单设计
  • CSS3实现的可缩进的侧栏导航菜单
  • 漂亮的纯CSS3水平导航菜单(有过渡动画效果)
  • 可以展开和闭合子菜单的CSS3垂直导航菜单
  • 又一个随内容滚动而变化的侧边/左侧目录导航
  • 侧边/左侧目录导航随内容滚动而变化
  • 纯CSS:非常漂亮的左侧导航/内容目录导航
  • 简单却实用的CSS水平和垂直导航栏【演示/源码】
  • CSS3 JQuery实现的三级下拉导航菜单

相关文章:
  • 纯CSS实现二级导航菜单(具有伸缩过渡效果)
  • 纯CSS实现的索引目录列表样式
  • CSS实现Menu Toggle移动菜单切换按钮(打开/关闭)
  • 纯CSS伪元素创建的84个小图标
  • 3行CSS代码实现文字镂空(动画)效果【演示/源码下载】
  • 【实例】详解 CSS3 animation 6个动画属性
  • 具有日期和具体钟点时间的时间线【演示/源码下载】
  • 纯CSS 6款文字动画(跳动、浮动、转动、翻转、碰撞)
  • 纯CSS实现的转动的圆环加载动画
  • 漂亮的左侧二级导航菜单(伸缩式)【演示/源码下载】
  •   runsly

    注册时间:

    网站:1 个   小程序:3 个  文章:12 篇

    • 738

      网站

    • 15

      小程序

    • 24478

      文章

    • 335

      会员

    赶快注册账号,推广您的网站吧!
    热门网站