用css3过渡简易实现三级菜单

最新推荐文章于 2020-11-06 17:24:51 发布
原创 最新推荐文章于 2020-11-06 17:24:51 发布 · 321 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客为初学者提供了使用CSS3过渡效果来简易实现三级菜单的思路。通过设置容器、菜单ul的样式，以及利用absolute定位、opacity和transition属性，实现菜单的显示与隐藏效果。同时介绍了visibility属性在布局中的作用，以及相对和绝对定位的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用css3过渡简易实现三级菜单

在这里插入图片描述
简单的写了一下，没有各种阴影、圆角的修饰，供初学者一点思路。

  1. 搭建容器

     <ul class="box">
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
               
            </ul>
        </li>
       
    </ul>

  2. 菜单ul的样式修饰：
    显示对所有li的修饰，宽、高、背景色、文字居中、行高，对一级标签的li进行左浮动，横向排列

    	li{line-height:50px;background-color: #000;list-style: none;text-align:center;width:160px;height:50px;color: #fff;} 
        a{text-decoration:none;color:#fff;}
        .box{margin:100px auto;width:862px;height:52px;}
        .box>li{position: relative;float:left;}

  3. 二级三级菜单ul的样式修饰
    二级菜单默认是隐藏状态，用绝对定位的方式（相对于一级菜单）将二级菜单定位在top:50px;left:0;的位置上、三级菜单也是隐藏状态，用绝对定位的方式（相对于二级菜单）将三级菜单定位在left:160;的位置上、用opacity这是透明级别为0、用transition制作一个过度显示和隐藏的效果

     .box1{position: absolute;top:50px;width:160px;opacity: 0;height: 0;visibility: hidden;transition:all 0.5s linear;}
         .box2{position: absolute;left:160px;visibility:hidden;opacity: 0;transition:all 0.5s linear;}

  4. 当鼠标移动到一级菜单栏的时候二级菜单栏显示,移动到一级菜单栏的时候二级菜单栏显示

      .box li:hover .box1{opacity:1;visibility: visible;margin:0;}
  .box1 li:hover .box2{opacity:1;visibility: visible;margin:0;}

5.介绍一下visibility属性
visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。

值描述
visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit规定应该从父元素继承 visibility 属性的值。

因为在二级导航、三级导航中定义了绝对定位属性，不占据原来的空间，而在一级导航设置了相对定位。

绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

6.完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        li{line-height:50px;background-color: #000;border:1px solid #000;list-style: none;text-align:center;width:160px;height:50px;color: #fff;} 
        a{text-decoration:none;color:#fff;}
        .box{margin:100px auto;width:862px;height:52px;}
        .box>li{position: relative;float:left;}
        .box1{position: absolute;top:50px;width:160px;opacity: 0;height: 0;visibility: hidden;transition:all 0.5s linear;}
        .box2{position: absolute;left:160px;visibility:hidden;opacity: 0;transition:all 0.5s linear;}
        .box li:hover .box1{opacity:1;visibility: visible;margin:0;}
        .box1 li:hover .box2{opacity:1;visibility: visible;margin:0;}
    </style>
</head>
<body>
    <ul class="box">
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">一级导航</a> 
            <ul class="box1">
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
                <li><a href=""> 二级导航</a>
                    <ul class="box2">
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                        <li>三级导航</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
CSS实现三级菜单
Denghalou的博客
09-09 789
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级菜单</title> <style> *{ padding: 0px; margin: 0px; cursor: pointer; }...
CSS 制作的三级菜单
03-22
NULL 博文链接：https://literary-fly.iteye.com/blog/902827
纯CSS实现网站三级菜单特效.zip
07-04
纯CSS实现网站三级菜单特效是一款悬浮在左侧的CSS三级下拉菜单。
三级菜单（纯DIV+CSS打造）
05-18
DIV+CSS 三级菜单（纯DIV+CSS打造）
CSS3实现3级菜单
09-10
CSS3实现3级侧边菜单，无javascript
实现下拉二级菜单的简易步骤
下拉二级菜单是用户界面设计中常见的...以上内容涵盖了下拉二级菜单的设计理念、技术实现、常见问题解决方法以及在不同场景中的应用，旨在提供一个全面的理解，从而在实际工作中能够更加高效和专业地使用下拉二级菜单。
用JavaScript打造全面的简易二级菜单
3. 实现JavaScript逻辑：编写脚本来监听事件并控制二级菜单的显示和隐藏，例如使用`mouseenter`和`mouseleave`事件。 4. 测试和调整：在不同的设备和浏览器上测试二级菜单的功能和样式，确保兼容性和用户体验。 ###...
CSS, JS与jQuery实现简易下拉菜单全解析
在本文档"js,jq,css多方面实现简易下拉菜单功能.docx"中，作者深入探讨了如何利用JavaScript (JS), jQuery (JQ), 和 CSS 三种核心前端技术，共同构建一个简洁且易于使用的下拉菜单功能。首先，我们关注的是CSS实现...
简易弹出式菜单的JS和CSS实现方法(模仿IBM开发中心)
在标题中提到的“js+css实现的简易弹出式菜单”意味着该菜单是利用JavaScript（js）和层叠样式表（CSS）技术来构建的。这种方法的优点在于不依赖于任何第三方库，如jQuery等，保持了代码的轻量级和高效性。 #### ...
简易实现美观的树形菜单教程
### 知识点三：使用 jQuery 创建树形菜单的步骤 1. **HTML 结构准备**：构建基础的 HTML 结构，通常是以 ul 和 li 元素组成的列表结构，用于表示树形结构的层级关系。 2. **引入 jQuery 库**：通过在 HTML 文件中...
纯CSS实现横向三级菜单导航栏
06-28
纯使用CSS技术实现三级联动导航菜单栏，有需要的盆友可以下载试试看，保证可以正常运营，查看三级联动的效果！
详解css3 Transition属性（平滑过渡菜单栏案例）
01-19
CSS3的制作动画的三大属性（Transform,Transition,Animation）下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。 语法 transition: property duration timing-function delay; 属性： 值 描述 transition-property 指定CSS属性的name，transition效
CSS制作简单的纵向菜单
JollyLee
12-07 3220
用CSS制作简单的纵向菜单
使用CSS3实现三级菜单
weixin_42409913的博客
11-02 316
一：效果 二：代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
纯css实现三级菜单栏
热门推荐
h1580824951的专栏
04-17 1万+
之前已经介绍了如何使用纯css实现二级菜单栏，其实三级菜单栏就是在二级菜单栏的基础上实现的。 我们先做成这个样子： 可以看到，这里我们在“关于我们”——“我们的故事”下面添加了三级菜单，这个只需要在“我们的故事”这个li里面添加一个ul即可实现； 不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题： 当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时，红框中
纯css制作三级菜单
汉堡请不要欺负面条
03-07 2015
一.注意点： 1.选择器的使用 ①element1>element2：如果元素element2不是父元素element1的直接子元素，则不会被选择。 ②element1+element2： 选择器用于选取第一个指定的元素element1之后（不是内部）紧跟的元素element2，同级元素 ③:hover :选择器用于选择鼠标指针浮动在上面的元素 ④:after: 选择器在被选元素的内
纯css实现的三级水平导航菜单
qq_45670012的博客
10-30 638
vscode练习使用开发纯css的三级水平导航菜单。先上图： 1、html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> ...
如何用CSS实现一个简单的（二）三级菜单
spech1ess的博客
11-06 1338
#实现效果图如下 1.写一个父类div用于包裹所有hove伪元素要显示的菜单。 2.在父类div中写入一个子类div用于一级菜单 <div class="father"> <div class="title">符文大陆</div> 3.在父类div中写入二级菜单，因为我们需要行列展示，所以我们使用无序列表ul li标签 <div class="father"> <div class="title">符文大陆&lt
CSS3实现飞行效果三级下拉菜单教程
这篇文章介绍了一种使用纯CSS3技术实现的创新性三级下拉菜单，其特色在于拥有独特的飞行效果，使得菜单在展开时具有动态和趣味性。这个菜单设计适用于网页导航，当用户将鼠标悬停在主菜单项上时，对应的二级菜单会以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值