修改手机版菜单样式

common/header.html

@@ -1,8 +1,4 @@
 <style>
-    .header .menu .menu-mask {
-        background-image: url('images/transparent-bg.png');
-    }
-
     .section.addrcont .aacont li::before {
         background-image: url('images/daohang.png');
     }

css/responsive.css

@@ -1,3 +1,23 @@
+@keyframes mobileHeaderFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translateY(0);
+  }
+}
+@keyframes mobileHeaderFadeOut {
+  0% {
+    opacity: 0.9;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
 @media screen and (max-width: 768px) {
   .pc {
     display: none;
@@ -30,6 +50,8 @@
     color: #FFFFFF;
   }
   .header .logo {
+    position: relative;
+    z-index: 10;
     font-size: 0;
   }
   .header .logo img {
@@ -38,6 +60,14 @@
   .header .main {
     height: 45px;
   }
+  .header .menu .menu-group.iFadeIn,
+  .header .menu .menu-mask.iFadeIn {
+    animation: mobileHeaderFadeIn 1.2s;
+  }
+  .header .menu .menu-group.iFadeOut,
+  .header .menu .menu-mask.iFadeOut {
+    animation: mobileHeaderFadeOut 1.2s;
+  }
   .header .menu .menu-group {
     z-index: 10;
     display: none;
@@ -45,7 +75,6 @@
     left: 0;
     top: 45px;
     right: 0;
-    animation-duration: 0.2s;
   }
   .header .menu .menu-mask {
     z-index: 5;
@@ -55,7 +84,8 @@
     left: 0;
     right: 0;
     bottom: 0;
-    animation-duration: 0.35s;
+    background-color: #000000;
+    opacity: 0.9;
   }
   .header .menu .menu-btn {
     z-index: 10;
@@ -67,20 +97,14 @@
   }
   .header .menu .item {
     margin-left: 0;
-    background-color: #C7001C;
     padding: 0 18px;
   }
   .header .menu .item .link {
     display: block;
     box-sizing: border-box;
-    border-bottom: 2px solid #D02121;
+    border-bottom: 1px solid #737373;
-    padding: 15px 0;
+    padding: 13px 0;
-  }
+    font-size: 16px;
-  .header .menu .item:first-child {
-    padding-top: 25px;
-  }
-  .header .menu .item:last-child {
-    padding-bottom: 40px;
   }
   .footer .logo-bottom {
     max-height: 26px;

css/responsive.less

@@ -5,6 +5,30 @@
 @st: 14px;
 @mst: 12px;
 
+@keyframes mobileHeaderFadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    100% {
+        opacity: 0.9;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mobileHeaderFadeOut {
+    0% {
+        opacity: 0.9;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+}
+
 @media screen and (max-width: 768px) {
     .pc {
         display: none;
@@ -55,6 +79,8 @@
 
     .header {
         .logo {
+            position: relative;
+            z-index: 10;
             font-size: 0;
 
             img {
@@ -67,6 +93,17 @@
         }
 
         .menu {
+
+            .menu-group.iFadeIn,
+            .menu-mask.iFadeIn {
+                animation: mobileHeaderFadeIn 1.2s;
+            }
+
+            .menu-group.iFadeOut,
+            .menu-mask.iFadeOut {
+                animation: mobileHeaderFadeOut 1.2s;
+            }
+
             .menu-group {
                 z-index: 10;
                 display: none;
@@ -74,7 +111,6 @@
                 left: 0;
                 top: 45px;
                 right: 0;
-                animation-duration: 0.2s;
             }
 
             .menu-mask {
@@ -85,7 +121,8 @@
                 left: 0;
                 right: 0;
                 bottom: 0;
-                animation-duration: 0.35s;
+                background-color: #000000;
+                opacity: 0.9;
             }
 
             .menu-btn {
@@ -100,24 +137,16 @@
 
             .item {
                 margin-left: 0;
-                background-color: #C7001C;
                 padding: 0 18px;
 
                 .link {
                     display: block;
                     box-sizing: border-box;
-                    border-bottom: 2px solid #D02121;
+                    border-bottom: 1px solid #737373;
-                    padding: 15px 0;
+                    padding: 13px 0;
+                    font-size: 16px;
                 }
             }
-
-            .item:first-child {
-                padding-top: 25px;
-            }
-
-            .item:last-child {
-                padding-bottom: 40px;
-            }
         }
     }
 

js/main.js

@@ -8,18 +8,28 @@ let isClose = true,
     headerMask = $('.menu-mask'),
     headerMenuBtn = $('.btn-img');
 
+let t1;
 function showMenu() {
-    heaerMenuGroup.show().addClass('fadeIn');
+    clearTimeout(t1);
-    headerMask.show().addClass('fadeIn');
+    heaerMenuGroup.show().removeClass('iFadeOut').addClass('iFadeIn');
+    headerMask.show().removeClass('iFadeOut').addClass('iFadeIn');
     headerMenuBtn.attr('src', window.Config.staticDir + '/images/guanbi.png');
+    $('body').css('overflow', 'hidden');
     isClose = false;
 }
 
 function hideMenu() {
-    heaerMenuGroup.removeClass('fadeIn').hide();
+    heaerMenuGroup.removeClass('iFadeIn').addClass('iFadeOut');
-    headerMask.removeClass('fadeIn').hide();
+    headerMask.removeClass('iFadeIn').addClass('iFadeOut');
     headerMenuBtn.attr('src', window.Config.staticDir + '/images/menu.png');
+    $('body').css('overflow', 'auto');
     isClose = true;
+
+    clearTimeout(t1);
+    t1 = setTimeout(function () {
+        heaerMenuGroup.hide();
+        headerMask.hide();
+    }, 1200);
 }
 
 $(function () {
@@ -41,9 +51,6 @@ $(function () {
     header.on('click', '.menu-btn', function () {
         (isClose == true) ? showMenu() : hideMenu();
     });
-    header.on('click', '.menu-mask', function () {
-        hideMenu();
-    });
     $('.business-nav a').click(function (event) {
         $('.business-nav a').removeClass('active');
         $(this).addClass('active');