admin 管理员组

文章数量: 887021

HTML,CSS导航栏＋过渡动画以及在使用同一类名情况下过渡到不同高度

导航栏使用<ul>,<li>标签导航栏的内容装在一个盒子里，使用<dl><dd>标签，在CSS中给<li>标签添加posation：relative，给装导航栏内容的盒子添加posation：absolute；目的是为了使各个导航栏下的盒子与所对应的导航栏对齐。然后让div隐藏（隐藏有四种方式：display：none；visibility：hidden；overflow：hidden；background：transparent具体区别会发布在另一篇文章），此时使用 visibility：hidden。

完成整个架构之后，在鼠标覆盖<li>标签时使下方的<div>visibility：hidden变为visibility：visible。然后添加过渡max-height: 450px ;  transition: max-height 1s;max-height是不同长度盒子中最大长度，此时就可以实现导航栏的下拉框可以正好适应自身内容的长度。

示例代码：

HTML

<div class="nav-d"><div class="nav-f"><ul id="nav-s"><li class="nav"><a href="">首页</a></li><li class="nav"><a href="">关于我们</a><div class="subNav"><dl><dd><a href="">概况</a></dd><dd><a href="">组织体系</a></dd><dd><a href="">委员会</a></dd><dd><a href="">院长寄语</a></dd><dd><a href="">学院架构</a></dd></dl></div></li><li class="nav"><a href="">师资队伍</a><div class="subNav"><dl><dd><a href="">院士</a></dd><dd><a href="">杰出人才</a></dd><dd><a href="">荣誉学衔</a></dd><dd><a href="">教研系列</a></dd><dd><a href="">研究系列</a></dd><dd><a href="">教学系列</a></dd><dd><a href="">博士后</a></dd><dd><a href="">教辅行政</a></dd><dd><a href="">光荣退休</a></dd></dl></div></li><li class="nav"><a href="">新闻公告</a><div class="subNav"><dl><dd><a href="">新闻动态</a></dd><dd><a href="">讲座信息</a></dd><dd><a href="">教学通知</a></dd><dd><a href="">科研通知</a></dd><dd><a href="">通知公告</a></dd></dl></div></li><li class="nav"><a href="">科学研究</a><div class="subNav"><dl><dd><a href="">研究领域</a></dd><dd><a href="">研究机构</a></dd><dd><a href="">科研基地</a></dd><dd><a href="">科研项目</a></dd><dd><a href="">关联机构</a></dd></dl></div></li><li class="nav"><a href="">人才培养</a><div class="subNav"><dl><dd><a href="">本科生教育</a></dd><dd><a href="">研究生教育</a></dd></dl></div></li><li class="nav"><a href="">招生信息</a><div class="subNav"><dl><dd><a href="">本科生</a></dd><dd><a href="">研究生</a></dd><dd><a href="">Internation <br />Students</a></dd><dd><a href="">招生导师</a></dd><dd><a href="">介绍视频</a></dd></dl></div></li><li class="nav"><a href="">招纳贤士</a><div class="subNav"><dl><dd><a href="">教师</a></dd><dd><a href="">博士后</a></dd><dd><a href="">专职研究人员</a></dd><dd><a href="">教学科研辅助</a></dd></dl></div></li><li class="nav"><a href="">学生工作</a><div class="subNav"><dl><dd><a href="">党团建设</a></dd><dd><a href="">学生动态</a></dd><dd><a href="">学工通知</a></dd></dl></div></li><li class="nav"><a href="">国际化</a><div class="subNav"><dl><dd><a href="">实习生项目</a></dd><dd><a href="">暑期夏令营</a></dd><dd><a href="">留学生项目</a></dd></dl></div></li></ul></div></div>

CSS部分：

.nav-d {width: 100%;height: 45px;line-height: 45px;background-color:rgb(142, 6, 6);position:relative;
}
.nav-f {background-color: rgb(134, 21, 21);width: 1263px;height: 45px;line-height: 45px;margin: 0 auto;padding: 0;position: relative;
}
.nav-f li.nav {display: inline;float: left;width: 121px;position: relative;text-align: center;
}
dd {display: block;padding: 0;
}.nav a {font-size: 1em;display: block;color: rgb(212, 224, 182);
}
a {outline: none;text-align: none;
}.subNav {visibility: hidden;background-color: rgb(134, 21, 21);max-height: 0;position:absolute;width: 121px;z-index: 99;
}li:hover > div {visibility: visible;max-height: 450px;transition: max-height 1s;overflow: hidden;
}.subNav dd:hover > a {padding: auto;background-color: rgb(177, 13, 13);color: white;
}

实例效果如图

本文标签： HTML CSS导航栏＋过渡动画以及在使用同一类名情况下过渡到不同高度

版权声明：本文标题：HTML,CSS导航栏＋过渡动画以及在使用同一类名情况下过渡到不同高度 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1700290089h382041.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。