浅谈纯CSS实现二级导航（优缺点与局限性）

最新推荐文章于 2022-03-07 12:44:07 发布
最新推荐文章于 2022-03-07 12:44:07 发布
阅读量534 收藏 3
点赞数 1
分类专栏： 笔记随笔 常见特效 教学笔录 学生提问 CSS 文章标签： 笔记随笔 常见特效 教学笔录 学生提问 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42445490/article/details/88819077
版权
笔记随笔 同时被 3 个专栏收录
75 篇文章 0 订阅
订阅专栏
教学笔录
73 篇文章 0 订阅
订阅专栏
CSS
29 篇文章 0 订阅
订阅专栏

【前言】

      本文简单说下如何用CSS实现二级导航，CSS实现的缺点很明显：二级导航无法实现过渡效果，高度变化由0变auto的过程和display由none变block一样，无法实现过渡。

  注意(局限性)：高度变化若想出现过渡效果，必须由0变到指定高度，如0-200px等才可以。

 

【主体

（1）height由0变为auto

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.nav{
			width: 80%;
			height: 40px;
			line-height: 40px;
			margin: auto;
		}
		.nav>li{
			float: left;
			min-width: 150px;
			position: relative;
			padding-bottom: 10px;
		}
		.nav>li>a{
			display: block;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			text-align: center;
			color: white;
		}
		.nav>li>ul{
			position: absolute;
			top: 50px;
			background: rgba(0,0,0,0.2);
			min-width: 150%;
			left: -25%;
			height: 0px;
			overflow: hidden;
			transition: all 0.6s;
		}
		.nav>li>ul>li>a{
			text-align: center;
			display: block;
			width: 100%;
			height: 100%;
			color: white;
		}
		.nav>li>a:hover{
			background: rgba(0,0,0,0.4);
		}
		.nav>li:hover ul{
			/*display: block;*/
			height: auto;
		}
		.nav>li>ul>li>a:hover{
			background: rgba(0,0,0,0.4);
		}
	</style>
</head>
<body>
	<!-- CSS实现的缺点很明显：二级导航无法实现过渡效果，高度变化由0变auto的过程和display由none变block一样，无法实现过渡。
		注意：高度变化若想出现过渡效果，需要由0变到指定高度，如0-200px等才可以。 -->
<ul class="nav">
	<li>
		<a href="#">首页</a>
	</li>
	<li>
		<a href="#">简介</a>
		<ul>
			<li><a href="#">创建时间</a></li>
			<li><a href="#">上市时间</a></li>
			<li><a href="#">风投时间</a></li>
		</ul>
	</li>
	<li>
		<a href="#">应聘</a>
		<ul>
			<li><a href="#">技术岗</a></li>
			<li><a href="#">管理岗</a></li>
			<li><a href="#">人资岗</a></li>
		</ul>
	</li>
	<li>
		<a href="#">产品</a>
		<ul>
			<li><a href="#">产品名称</a></li>
			<li><a href="#">产品来源</a></li>
			<li><a href="#">产品功效</a></li>
			<li><a href="#">市场效益</a></li>
		</ul>
	</li>
	<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>

 

（2）height由0变为200px----有过渡效果

将height的auto改为200px即可

 

（3）display由none改为block

.nav>li>ul{
	display: none;
}
.nav>li:hover ul{
	display: block;
}

 

.

骆小胖
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
09-24
主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参考下
浅谈jQuery实现二级导航（优缺点与局限性）
骆小胖~
01-15 349
seover：当鼠标指针位于元素上方时，会发生 mouseover 事件。 mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。 　　从这里的一个小插曲上，我们应该可以看出，mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so...一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。所以，你可以这么理解：mouseenter事件只作用于目
CSS的限制
o3d_tech
08-22 663
使用“完整”的CSS的缺点包括：　　浏览器支持的不一致性 浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本 ，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如：width，height，和float。许多所谓的CSS人员，必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中，要达
CSS动画的局限性
cungui5726的博客
08-19 331
Before you start to experiment in moving elements with CSS it’s useful to know what can’t be animated. In the current spec, the following properties cannot be manipulated with keyframes or transitions...
CSS+DIV 二级导航
zc2087的专栏
02-01 1544
 www.sincol.net.preload1 { BACKGROUND: url(http://www.sincol.net/code/demo/0802/pro_drop4/prodrop4/pro_drop4_2a.gif)}.preload1 { BACKGROUND: url(http://www.sincol.net/code/demo/0802/pr
纯CSS制作二级导航下拉列表
04-30
本教程将详细讲解如何使用纯CSS技术来创建一个二级导航下拉列表，无需JavaScript，仅依赖HTML和CSS就能实现。这种方法既简单又高效，适用于初学者和有经验的开发者。 首先，我们需要构建HTML基础结构。一个基本的二...
纯CSS实现二级导航下拉菜单
05-06
以上就是使用纯CSS实现二级导航下拉菜单的基本步骤。通过调整CSS属性，你可以自定义菜单的样式、动画效果以及交互行为，以适应不同网站的设计需求。记住，良好的导航设计应简洁易用，同时保持与网站整体风格的一致性...
纯CSS+XHTML实现的二级导航菜单效果
09-24
标题中的“纯CSS+XHTML实现的二级导航菜单效果”是指使用CSS（层叠样式表）和XHTML（可扩展超文本标记语言）这两种技术来创建一个具有二级结构的导航菜单。这种菜单在用户交互时，如鼠标悬停，会显示或隐藏下一级的...
纯CSS实现超简单的二级下拉导航菜单代码
09-25
主要为大家介绍了纯CSS实现超简单的二级下拉导航菜单代码,涉及css针对hover样式设置的相关技巧,非常简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
纯CSS二级导航菜单
11-20
"纯CSS二级导航菜单"是一个完全依赖CSS（层叠样式表）来实现的交互式菜单，不涉及JavaScript或其他编程语言。这种菜单设计适用于那些希望简化代码、提高网页加载速度以及优化移动设备用户体验的开发者。 首先，我们...
纯CSS精美二级导航栏
05-09
纯CSS精美二级导航栏，博客http://www.cnblogs.com/hxsyl/p/4489518.html
纯css实现漂亮的左右二级导航
11-17
纯css实现的漂亮的左右二级导航效果，支持所有浏览器，无需任何javascript
2020-11-06 css实例：二级导航实例及样式解释
Amanda&Rachel的博客
11-06 179
css实例：二级导航实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*重置样式*/ *{ margin: 0; padding: 0; } ul li{ list-style: none; } a{ text-decor
CSS的缺陷
drawlessonsfrom的博客
04-03 896
一、总体缺陷概括 CSS文件中常常充斥着大量重复的定义，不但编写时很难组织，代码量庞大，而且随着项目规模的扩大，维护会越来越困难。 二、具体缺陷 1、无法定义变量 一些很常用的属性值无法将其赋值给变量，然后进行调用变量来进行使用。 2、重复代码 CSS的继承机制是根据HTML的层级关系来决定的，如果HTML文档中存在父子元素的关系，那么子元素可以继承父元素的部分属性，而没有父子关系的则不能进行继承。在很多情况下，几个元素拥有类似的定义，却没有父子关系，此时不得不定义大量重复的代码。 3、计算问题 CSS没有
css3 选择器的兼容性_CSS选择器的局限性
cungui5726的博客
08-20 203
css3 选择器的兼容性A great deal can be accomplished with pure CSS, but the power of the syntax is limited by its inability to affect certain elements. Understanding those limitations is the first step to det...
二级菜单效果（3）
ice-cream
03-07 124
  html代码结构: &lt;li class="menu"&gt; &lt;div&gt;&lt;span class="l"&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="#"&gt;线路&lt;/a&gt;&lt;span class="r"&gt;&amp;
CSS的弊端
m0_55960697的博客
03-07 815
css是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。 1. css需要书写大量看似没有逻辑的代码，css冗余度是比较高的 2. 不方便维护及扩展，不利于复用 3. css没有很好的计算能力 4. 非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目 ...
做二级菜单的感受
hu2398115406的博客
10-10 110
昨天学了老师教的二级菜单，听的很认真，但自己实际敲代码的时候又有很多问题。老师教的时候很仔细，每个细节都说清楚了。二级菜单中要用到relative和absolute这俩个定位而且相对定位relative作为绝对定位的基点才能实现网页的那种二级菜单。听的时候都懂了，却在实际操作的时候破绽百出，还是敲代码敲少了，看见很多代码就害怕，一步一步分层，这里一个div那里一个div，搞得晕头转向，听到老师讲的很有条理，我还是没有理清楚自己敲代码时候的逻辑，有时候真的很急躁，明明看上去不是很难的作...
简单的二级导航页面（纯css实现，运用display属性hover）
热门推荐
青菜馒头web前段
09-14 1万+
html代码<div class="menu"> <ul> <li><a href="#" class="bccolor">首页</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">人才招
优化网站左侧导航的CSS实现探讨
CSS布局在实现导航栏的视觉效果和交互性方面起到关键作用。博客园的实现可能侧重于与后端数据的紧密集成，而作者认为可能有更简洁、更高效的布局方式。例如，使用Flexbox或Grid布局可以简化多级导航的实现，提供更好...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值