From 2311aedbeb7e50bf25133f1b97c73d641cd8754b Mon Sep 17 00:00:00 2001
From: victor <769540698@qq.com>
Date: Fri, 30 Apr 2021 21:36:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E8=87=B4=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/menu.html | 162 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 webapp/menu.html
diff --git a/webapp/menu.html b/webapp/menu.html
new file mode 100644
index 0000000..8e69ec2
--- /dev/null
+++ b/webapp/menu.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <title>侧边下拉导航栏</title>
+</head>
+<style type="text/css">
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    html,body{
+        height: 100%;
+    }
+    .wrap{
+        width: 260px;
+        height: 100%;
+        background-color: #363a45;
+    }
+    .header{
+        width: 100%;
+        height: 65px;
+        background-color: #44495a;
+        font-size: 24px;
+        color: #fff;
+        text-align: center;
+        line-height: 65px;
+    }
+    .nav{
+        width:250px;
+        margin: 10px 5px 0;
+    }
+    .list{
+        margin-bottom: 5px;
+    }
+    .list h2{
+        position: relative;
+        padding: 15px 0;
+        background-color: #3889d4;
+        text-align: center;
+        font-size: 16px;
+        color: #fff;
+        transition: .5s;
+    }
+    .list h2.on{
+        background-color: #393c4a;
+    }
+    .list i{
+        position: absolute;
+        right: 10px;
+        top: 16px;
+        border: 8px solid transparent;
+        border-left-color: #fff;/*triangle*/
+        transform:rotate(0deg);
+        transform-origin: 1px 8px;
+        transition: .5s;
+    }
+    .list i.on{
+        transform:rotate(90deg);
+    }
+    .hide{
+        overflow: hidden;
+        height: 0;
+        transition: .5s;
+    }
+    .hide h5{
+        padding: 10px 0;
+        background-color: #282c3a;
+        text-align: center;
+        color:#fff;
+        border-bottom:#42495d;
+    }
+</style>
+<body>
+    <div class="wrap">
+        <div class="header">菜单</div>
+        <div class="nav">
+            <ul>
+                <li class="list">
+                    <h2><i></i>num</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num1</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num2</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+                <li class="list">
+                    <h2><i></i>num3</h2>
+                    <div class="hide">
+                        <h5>1</h5>
+                        <h5>2</h5>
+                        <h5>3</h5>
+                        <h5>4</h5>
+                        <h5>5</h5>
+                        <h5>6</h5>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script>
+        (function () {
+            var oList = document.querySelectorAll('.list h2'),
+                oHide = document.querySelectorAll('.hide'),
+                oIcon = document.querySelectorAll('.list i'),
+                lastIndex = 0;
+            for(var i=0;i<oList.length;i++){
+                oList[i].index = i;//自定义属性
+                oList[i].isClick = false;
+                oList[i].initHeight = oHide[i].clientHeight;
+                oHide[i].style.height = '0';
+                oList[i].onclick = function () {
+                    if(this.isClick){
+                        oHide[this.index].style.height = '0';
+                        oIcon[this.index].className = '';
+                        oList[this.index].className = '';
+                        oList[this.index].isClick = false;
+                    }
+                    else{
+                        oHide[lastIndex].style.height = '0';
+                        oIcon[lastIndex].className = '';
+                        oList[lastIndex].className = '';
+                        oHide[this.index].style.height = '220px';
+                        oIcon[this.index].className = 'on';
+                        oList[this.index].className = 'on';
+                        oList[lastIndex].isClick = false;
+                        oList[this.index].isClick = true;
+                        lastIndex = this.index;
+                    }
+                }
+            }
+        })();
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

