fix 导航自适应

zhurc · zhurc · commit a67290d093a3 · 2018-01-04T15:55:26.000+08:00
diff --git a/examples/css/header.css b/examples/css/header.css
@@ -61,6 +61,16 @@
     height: 60px;
 }
 
+.navbar.default .navbar-title {
+    height: 100%;
+    width: 420px;
+}
+
+.navbar.lite .navbar-title {
+    height: 100%;
+    width: auto;
+}
+
 /*头部选项下拉菜单框的样式*/
 .navbar ul {
     list-style: none outside none;
@@ -77,11 +87,12 @@
     vertical-align: middle;
 }
 
-.navbar .menu-sub-warp {
+.navbar-menu .menu-sub-warp {
     max-height: 0;
 }
 
-.navbar-menu:hover .menu-sub-warp {
+.navbar-menu:hover .menu-sub-warp,
+.navbar-menu.active .menu-sub-warp {
     max-height: 600px;
     transform-origin: 50% 0;
     -webkit-transform-origin: 50% 0;
@@ -261,7 +272,47 @@ ul.icl-nav-menu-sub:nth-child(1) {
     width: 120px;
 }
 
-@media screen and (max-width: 1284px) {
+@media screen and (max-width: 1180px) {
+    .navbar.default .navbar-toggle {
+        display: block;
+        float: right;
+    }
+
+    .navbar.default .navbar-collapse.collapse {
+        display: none !important;
+    }
+
+    .navbar.default .collapse.in {
+        display: block !important;
+    }
+
+    .navbar.default .navbar-header {
+        float: none;
+    }
+
+    .menu-box {
+        top: 120px;
+    }
+}
+
+@media screen and (max-width: 1030px) {
+    .navbar.lite .navbar-toggle {
+        display: block;
+        float: right;
+    }
+
+    .navbar.lite .navbar-collapse.collapse {
+        display: none !important;
+    }
+
+    .navbar.lite .collapse.in {
+        display: block !important;
+    }
+
+    .navbar.lite .navbar-header {
+        float: none;
+    }
+
     .menu-box {
         top: 120px;
     }
@@ -297,14 +348,6 @@ ul.icl-nav-menu-sub:nth-child(1) {
         float: right;
     }
 
-    .navbar-collapse.collapse {
-        display: none !important;
-    }
-
-    .navbar-nav > li {
-        float: none;
-    }
-
     .collapse.in {
         display: block !important;
     }
@@ -375,7 +418,7 @@ ul.icl-nav-menu-sub:nth-child(1) {
     }
 }
 
-@media screen and (max-width: 698px) {
+@media screen and (max-width: 659px) {
     .menu-box {
         top: 180px;
     }
diff --git a/examples/template/header.html b/examples/template/header.html
@@ -1,11 +1,12 @@
-<nav class="navbar navbar-static-top">
+<nav class="navbar navbar-static-top lite">
     <div class="nav-header">
         <div class="navbar-header">
-
-            <a class="navbar-brand" target="_blank" href="../../web/index.html">
-                <span class="project-title vm" id="title">SuperMap iClient 9D</span>
-            </a>
-            <div id="suffix-title"></div>
+            <div class="navbar-title">
+                <a class="navbar-brand" target="_blank" href="../../web/index.html">
+                    <span class="project-title vm" id="title">SuperMap iClient 9D</span>
+                </a>
+                <div id="suffix-title"></div>
+            </div>
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
                     aria-expanded="false">
                 <i class="fa fa-bars"></i>
@@ -61,7 +62,7 @@
     $(document).ready(function () {
         if (identification && identification.name) {
             var suffixHeader = document.getElementById("suffix-title");
-            suffixHeader.innerText = (notFor.indexOf(identification.name) < 0 ? "for " : "" ) + identification.name;
+            suffixHeader.innerText = (notFor.indexOf(identification.name) < 0 ? "for " : "") + identification.name;
         }
     });
 </script>
