纯手写实现HTML+CSS+JS 匀速运动纵向二级菜单收缩效果

作者：极客小俊 一个把逻辑思维转变为代码的技术博主
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
搜索公众号: [极客小俊] 原创文章

不管是轮播图，还是二级菜单，都还是先考虑html的代码结构与css样式的实现

依旧遵循一个 先有结构再有行为效果的道理!

目录结构

├── img
│   └── arrow.gif
│   └── close.gif
│   └── open.gif
├── js
│   └── move.js
│   └── tool.js
└──index.html

工具函数

在做之前先引入我之前写好的move.js和tool.js工具函数库

??扫码关注，回复关键字，马上领取相关资源

微信扫描二维码，关注“极客小俊”公众号(GeekerJun)
回复关键词“二级菜单”即可获得相关资源与素材文件

html代码结构如下

    

        

            
开发语言
            

                
java
                
php
                
c++
                
c#
                
python
                
javascript
            
        
    

    

        

            
网络技术
            

                
TCP/IP
                
HTTP
                
FTP
                
局域网技术
                
Linux服务器搭建
                
网络优化
            
        

    

    

        

            
跨境电商
            

                
淘宝
                
京东
                
唯品会
                
天猫
                
蘑菇街
                
凡客
            
        
    


    

        

            
CSS核心技术
            

                
元素定位
                
动画效果
                
lass
                
sass
                
盒子模型
                
CSS Sprites
            
        
    

    

        

            
前端框架
            

                
React
                
Layui
                
Element-UI
                
Mint UI
                
Angular
                
vue.js
            
        
    

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 = '';
        });
    }
}

效果图