简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果

页面样式如下：

html：

<li><div class="nav-tab">技术分析</div><ul class="nav-menu"><li>音视频</li><li>语言</li><li>Firebase</li><li>Google AAB</li><li>百度</li></ul>
</li>

直接上CSS代码：

        li {float: left;width: 120px;height: 80px;cursor: pointer;  // 鼠标移入导航栏变小手.nav-tab {height: 80px;width: 104px;margin: 0 auto;text-align: center;font-size: 16px;color: #ffffff;line-height: 80px;font-weight: 400;}.nav-menu {width: 120px;height: 0px;float: left;background: #ffffff;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);border-radius: 0 0 2px 2px;overflow: hidden; // 让li的内容隐藏，实现从上往下显示的效果li {margin-left: 8px;width: 104px;height: 55px;border-bottom: 1px solid #eeeeee;font-size: 14px;line-height: 55px;text-align: center;font-weight: 400;}}}li:hover {.nav-tab {border-bottom: 4px solid #1890ff;  // 鼠标悬停时tab的底边框样式，以及下方的字体颜色color: #2271f7;}.nav-menu {transition: all 0.3s;  // 鼠标移出时menu瞬间消失，故将transition加在hover里height: 275px;  // 使menu的高度从0到275px，配合transition实现平滑滑下的动画效果}}

效果展示：

题外话：好家伙，弄个效果展示的gif，录屏软件一个水印，在线视频转gif又一个水印，图又小又不清晰还有俩水印在上面，心里苦哇~~~

2022.3.30更新：已找到不错的录屏和gif转换软件，哈哈

简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果相关推荐

Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
简而言之就是,将导航的ul列表放在一个盒子里,然后导航栏置顶,设置透明度,设置z-index值效果图如下: 页面代码: body: <div clas ...
html+css 实现导航栏二级菜单——气泡框
页面效果展示: 代码实现: HTML部分 <!DOCTYPE html> <html lang="en"><head><meta char ...
ecshop简单三部实现导航分类二级菜单
1.在page_header.lbi对应的位置(你想显示导航的位置)插入 (注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件 ...
css导航栏（二级菜单）
效果: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
html 导航右侧弹出层,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
html导航栏文字怎么平均,对齐HTML/CSS导航栏中的文本？
好吧,很明显我做错了什么.基本上我试图在我的页面顶部创建一个垂直导航栏,在图片的右侧.对齐HTML/CSS导航栏中的文本? 它应该是这样的: 首页简历联系我不知怎的,它不断结束了这样的: 主页简历 ...

简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果

简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果相关推荐

最新文章

热门文章