纯CSS实现导航栏下拉动画效果

待我称王封你为后i 2022-11-26 07:44 123阅读 0赞

## 实现思路 ##

导航栏的下拉效果通过在ul的li里再嵌套一个ul，再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。  
**实现效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]

## HTML代码 ##

<div class="nav">
    			<ul>
    				<li>
    					<a href="#">奥利给</a>
    					<ul class="son">
    						<li><a href="#">雷霆嘎巴</a></li>
    						<li><a href="#">哈拉少</a></li>
    						<li><a href="#">Giao</a></li>
    					</ul>
    			    </li>
    				<li>
    					<a href="#">吃惊</a>
    					<ul class="son">
    						<li><a href="#">我的天</a></li>
    						<li><a href="#">假的吧</a></li>
    						<li><a href="#">嘻嘻</a></li>
    					</ul>
    				</li>
    				<li>
    					<a href="#">卧槽</a>
    					<ul class="son">
    						<li><a href="#">哈哈</a></li>
    						<li><a href="#">无情</a></li>
    						<li><a href="#">哈喽</a></li>
    					</ul>
    				</li>
    				<li>
    					<a href="#">有趣</a>
    					<ul class="son">
    						<li><a href="#">做梦</a></li>
    						<li><a href="#">想你</a></li>
    						<li><a href="#">每一天</a></li>
    					</ul>
    				</li>
    				
    		</div>

## CSS ##

<style> *{ 
    				/*设置通用样式*/
    				padding: 0;
    				margin: 0;
    			}
    			.nav{ 
    				width: 100%;
    				height:40px;
    				margin-top: 300px;
    				background-color:#000000;
    			}
    			.nav>ul{ 
    				/*子元素选择器（>号）设置第一导航栏样式*/
    				width: 700px;
    				height:40px;
    				margin:0px auto;
    			}
    			.nav>ul>li{ 
    				float: left;/*设置li浮动*/
    				width: 110px;
    				height:100%;
    				list-style: none;/*取消li符号*/
    				margin-right: 50px;/*设置每个li的右外边距*/
    			}
    			.nav>ul>li:hover{ 
    				/*给li设置鼠标划入背景颜色*/
    				background-color:orange;
    			}
    			.nav>ul>li a{ 
    				/*设置a链接样式*/
    				color: #FFFFFF;
    				font-weight: bold;
    				line-height: 40px;
    				margin-left: 30px;
    				text-decoration: none;/*取消a链接下划线*/
    			}
    			.nav>ul>li:hover .son{ 
    				/*鼠标划入li时显示第二列表*/
    				display: block;
    				background-color:orange;
    				animation:move 0.5s 0s;/*设置划入导航栏下拉的动画效果*/
    			}
    			@keyframes move{ 
    				/*设置animation动画参数*/
    				0%{ 
    					/*动画开始时*/
    					height:0px;
    				}
    				100%{ 
    					/*动画结束时*/
    					height: 120px;
    				}
    			}
    			.son{ 
    				/*设置第二导航栏样式*/
    				list-style: none;
    				display: none;/*隐藏第二列表*/
    				text-align: left;
    			}
    			.son li:hover{ 
    				/*当鼠标划入时将第li背景颜色设为红色*/
    				background-color: red;
    			}
    
    		</style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221124/0529cd4d9ee04bc5ae1071da320688e4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关滑动导航栏效果 html+css+js

一.先看效果（完整代码在最后）： ![在这里插入图片描述][20210501193422872.gif_pic_center] 实现并不难，但是初学 js 时拿来练手

超、凢脫俗/ 2023年01月18日 06:47/ 0 赞/ 108 阅读

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 236 阅读

相关纯CSS实现导航栏下拉动画效果

实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul，再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。实现效果：

待我称王封你为后i/ 2022年11月26日 07:44/ 0 赞/ 124 阅读

相关 js css 下拉动画

初始css： .wrapper { transition:height 1s ease-out; height:0;

清疚/ 2022年11月21日 03:54/ 0 赞/ 97 阅读

相关震惊！纯 CSS 的导航栏切换方案

本文是非常有意思的一篇文章，介绍了 CSS 中，非常强大的一个知识点：如何通过点击某个元素，控制其他元素~ 不用 `Javascript`，使用纯 `CSS` 方案，实现

亦凉/ 2022年11月14日 13:16/ 0 赞/ 137 阅读

相关 LinearLayout+Fragment实现下导航栏效果

本文将利用LinearLayout+Fragment实现下导航栏效果手机APP开发者可以直接在本测试案例上进行二次开发，可以节省自己手动写导航栏的时间和精力。实现原

ゞ浴缸里的玫瑰/ 2022年07月12日 10:28/ 0 赞/ 154 阅读

相关如何实现渐变导航栏效果

有时，app需要有渐变色效果，如果使用图片，当然也可以，但图片是很吃资源的，并且不能灵活改变颜色。这时可以考虑使用CAGradientLayer这个类来实现。 -------

一时失言乱红尘/ 2022年07月12日 06:43/ 0 赞/ 234 阅读

相关实现导航栏吸附效果

以下是完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年01月19日 20:09/ 0 赞/ 276 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

参考文章“不可思议的纯CSS导航栏下划线跟随效果”[https://www.cnblogs.com/coco1s/p/8657192.html][https_www.cnblo

本是古典何须时尚/ 2021年09月28日 09:26/ 0 赞/ 467 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

先上张图，如何使用纯 CSS 制作如下效果？ ![20190412103519933.png][] 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一

你的名字/ 2021年09月18日 22:18/ 0 赞/ 289 阅读