纯手写实现HTML+CSS+JS 匀速运动纵向二级菜单收缩效果
作者：极客小俊 一个把逻辑思维转变为代码的技术博主
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
搜索公众号:[极客小俊]原创文章
不管是轮播图，还是二级菜单，都还是先考虑html的代码结构与css样式的实现
依旧遵循一个 先有结构再有行为效果的道理!
目录结构
├── img
│ └── arrow.gif
│ └── close.gif
│ └── open.gif
├── js
│ └── move.js
│ └── tool.js
└──index.html
工具函数
在做之前先引入我之前写好的move.js和tool.js工具函数库
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
💗扫码关注，回复关键字，马上领取相关资源
微信扫描二维码，关注“极客小俊”公众号(GeekerJun)
回复关键词“二级菜单”即可获得相关资源与素材文件
html代码结构如下
<div id="menu">
<ul>
<li>
<h2><span></span><strong>开发语言</strong></h2>
<ul class="display-element hidden">
<li><a href="javascript:;">java</a></li>
<li><a href="javascript:;">php</a></li>
<li><a href="javascript:;">c++</a></li>
<li><a href="javascript:;">c#</a></li>
<li><a href="javascript:;">python</a></li>
<li><a href="javascript:;">javascript</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2><span></span><strong>网络技术</strong></h2>
<ul class="display-element hidden">
<li><a href="javascript:;">TCP/IP</a></li>
<li><a href="javascript:;">HTTP</a></li>
<li><a href="javascript:;">FTP</a></li>
<li><a href="javascript:;">局域网技术</a></li>
<li><a href="javascript:;">Linux服务器搭建</a></li>
<li><a href="javascript:;">网络优化</a></li>
</ul>
<li>
</ul>
<ul>
<li>
<h2><span></span><strong>跨境电商</strong></h2>
<ul class="display-element hidden">
<li><a href="javascript:;">淘宝</a></li>
<li><a href="javascript:;">京东</a></li>
<li><a href="javascript:;">唯品会</a></li>
<li><a href="javascript:;">天猫</a></li>
<li><a href="javascript:;">蘑菇街</a></li>
<li><a href="javascript:;">凡客</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2><span></span><strong>CSS核心技术</strong></h2>
<ul class="display-element hidden">
<li><a href="javascript:;">元素定位</a></li>
<li><a href="javascript:;">动画效果</a></li>
<li><a href="javascript:;">lass</a></li>
<li><a href="javascript:;">sass</a></li>
<li><a href="javascript:;">盒子模型</a></li>
<li><a href="javascript:;">CSS Sprites</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2><span></span><strong>前端框架</strong></h2>
<ul class="display-element hidden">
<li><a href="javascript:;">React</a></li>
<li><a href="javascript:;">Layui</a></li>
<li><a href="javascript:;">Element-UI</a></li>
<li><a href="javascript:;">Mint UI</a></li>
<li><a href="javascript:;">Angular</a></li>
<li><a href="javascript:;">vue.js</a></li>
</ul>
</li>
</ul>
</div>
css代码如下
ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: #fa709a;
}
ul {
list-style: none;
}
#menu {
width: 230px;
margin: 50px auto;
border: 3px solid #f5576c;
color: white;
border-radius: 6px;
}
#menu > ul > li > h2 {
font-size: 18px;
/*height:30px;*/
line-height: 30px;
background-image: linear-gradient(#fa709a, #fee140);
padding: 5px 25px;
cursor: pointer;
}
#menu > ul > li > h2 > span {
display: inline-block;
width: 10px;
height: 10px;
background: url("img/close.gif");
}
#menu > ul > li > h2 > strong {
margin-left: 10px;
}
.display-element {
overflow: hidden;
}
.display-element > li {
background-color: #f5f7fa;
}
.display-element > li > a {
display: block;
line-height: 30px;
padding: 5px 10px;
border-bottom: 1px dotted #ccc;
/*background-color: red;*/
width: 180px;
margin: 0 auto;
}
.display-element > li:last-child a {
border: none;
}
.display-element > li:hover {
background: #fda085 url("img/arrow.gif") no-repeat 200px center;
color: white;
}
.display-element > li > a:hover {
color: white;
}
.display-element.hidden {
height: 0px;
}
js代码如下
window.onload = function () {
var menu = document.getElementById('menu');
var title = menu.getElementsByTagName('h2');
var openElement=title[0].nextElementSibling;
for (var i = 0; i < title.length; i++) {
title[i].index = i;
title[i].onclick = function () {
var displayElement = this.nextElementSibling;
this.firstElementChild.style.backgroundImage='url("img/open.gif")';
menuMove(displayElement);
if(displayElement!=openElement && !hasClass(openElement,'hidden')){
menuMove(openElement); openElement.previousElementSibling.firstElementChild.style.backgroundImage='url("img/close.gif")';
}
if(displayElement==openElement && hasClass(displayElement,'hidden')){
this.firstElementChild.style.backgroundImage='url("img/close.gif")';
}
openElement=displayElement;
}
}
function menuMove(obj) {
var beginHeight = obj.offsetHeight;
toggleClass(obj, 'hidden');
var endHeight = obj.offsetHeight;
obj.style.height = beginHeight + "px";
moveElement(obj, 'height', 30, endHeight, function () {
obj.style.height = '';
});
}
}
效果图
"点赞" "评论" "收藏"
