下拉滑动二级导航菜单demo

最新推荐文章于 2021-08-03 19:35:28 发布

flypigMissM

最新推荐文章于 2021-08-03 19:35:28 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：导航下拉导航菜单

本文链接：https://blog.youkuaiyun.com/flypigMissM/article/details/54313810

web前端专栏收录该内容

3 篇文章

订阅专栏

该博客展示了如何创建一个响应式的下拉导航菜单。当鼠标悬停在主菜单上时，二级菜单会以平滑的过渡效果展开，提供丰富的子选项。这个效果通过CSS的`transition`属性实现，使得菜单的展开和收起具有动画效果。

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

网页效果，显示主菜单，带你给用户鼠标移至主菜单时会产生下拉菜单，移开隐藏

以下为完整的代码和部分解释
整个父容器为300px，显示50px，鼠标移至主菜单则下拉250px

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XuCaiyunLet'sDoIt</title>
<style type="text/css">
body{
margin:0;
font-family:'微软雅黑','Times New Roman', Times, serif; //font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
}
.navi_head{
height:50px;
background-color:#459df5;//持续显示的50px背景色为蓝色
}
.navi_body{
overflow:hidden; //显示navi_body的50px，其余全部剪去
height:50px;
background:rgba(36,97,158,0.9);
transition:height ease 0.5s;//transition属性：transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程

//transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程

//transition:<过渡属性名称> <过渡时间> <过渡模式>

  //1.ease 逐渐变慢
  //2.linear 匀速
  //3.ease-in 缓慢开始（加速）
  //4.ease-out 缓慢结束（减速）
  //5.ease-in-out 缓慢开始，缓慢结束（先加速后减速）
  //6.cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）
}
.navi_body:hover{ //当鼠标移至主菜单时时，显示被剪切的300px
height:300px;
}

.navi_head>div>span{
width:150px;
text-align:center;
height:300px;
display:inline-block; //display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

//即所有的.navi_head>div>span表现为并列同行排列（inline），而所有的navi_head>div>span内的元素表现每个元素从新一行开始呈现（block）
font-weight:bold;
color:#FFF;
font-size:14px;
vertical-align:top;
}

.navi_head>div>span>p a{
color:#FFF;
text-decoration:none;
}
.navi_head>div>span>p a:hover{
color:#FFF;
text-decoration:underline;//a标签鼠标移至上面时显示下划线
}

.navi_title{
font-size:16px;
line-height:50px;
margin-top:0;
}

.navi_head>div>span:hover{
background:rgba(100,100,100,0.2);
}
</style>
</head>
<body>
<div>
<div class="navi_body">
<div class="navi_head">
<div style="width:80%; margin-left:auto; margin-right:auto;">
<span>
<p class="navi_title">XUZONE</p>
</span>
<span>
<p class="navi_title">Home</p>
</span>
<span>
<p class="navi_title">about me</p>
</span>
<span>
<p class="navi_title">软件下载</p>
<p><a href="">WEB编译工具</a></p>
<p><a href="">桌面整理工具</a></p>
</span>
<span>
<p class="navi_title">招贤纳士</p>
<p><a href="">WEB前端工程师</a></p>
<p><a href="">JAVAWEB工程师</a></p>
<p><a href="">APP开发工程师</a></p>
<p><a href="">数据库工程师</a></p>
<p><a href="">软件架构师</a></p>
<p><a href="">技术客服</a></p>
</span>
<span>
<p class="navi_title">给我留言</p>
<p><a href="">站内留言</a></p>
<p><a href="">站长信箱</a></p>
</span>
</div>
</div>
</div>
</div>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>

</body>
</html>