Skip to content

Commit a67290d

Browse files
committed
fix 导航自适应
1 parent d42e8b7 commit a67290d

File tree

2 files changed

+63
-19
lines changed

2 files changed

+63
-19
lines changed

examples/css/header.css

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,16 @@
6161
height: 60px;
6262
}
6363

64+
.navbar.default .navbar-title {
65+
height: 100%;
66+
width: 420px;
67+
}
68+
69+
.navbar.lite .navbar-title {
70+
height: 100%;
71+
width: auto;
72+
}
73+
6474
/*头部选项下拉菜单框的样式*/
6575
.navbar ul {
6676
list-style: none outside none;
@@ -77,11 +87,12 @@
7787
vertical-align: middle;
7888
}
7989

80-
.navbar .menu-sub-warp {
90+
.navbar-menu .menu-sub-warp {
8191
max-height: 0;
8292
}
8393

84-
.navbar-menu:hover .menu-sub-warp {
94+
.navbar-menu:hover .menu-sub-warp,
95+
.navbar-menu.active .menu-sub-warp {
8596
max-height: 600px;
8697
transform-origin: 50% 0;
8798
-webkit-transform-origin: 50% 0;
@@ -261,7 +272,47 @@ ul.icl-nav-menu-sub:nth-child(1) {
261272
width: 120px;
262273
}
263274

264-
@media screen and (max-width: 1284px) {
275+
@media screen and (max-width: 1180px) {
276+
.navbar.default .navbar-toggle {
277+
display: block;
278+
float: right;
279+
}
280+
281+
.navbar.default .navbar-collapse.collapse {
282+
display: none !important;
283+
}
284+
285+
.navbar.default .collapse.in {
286+
display: block !important;
287+
}
288+
289+
.navbar.default .navbar-header {
290+
float: none;
291+
}
292+
293+
.menu-box {
294+
top: 120px;
295+
}
296+
}
297+
298+
@media screen and (max-width: 1030px) {
299+
.navbar.lite .navbar-toggle {
300+
display: block;
301+
float: right;
302+
}
303+
304+
.navbar.lite .navbar-collapse.collapse {
305+
display: none !important;
306+
}
307+
308+
.navbar.lite .collapse.in {
309+
display: block !important;
310+
}
311+
312+
.navbar.lite .navbar-header {
313+
float: none;
314+
}
315+
265316
.menu-box {
266317
top: 120px;
267318
}
@@ -297,14 +348,6 @@ ul.icl-nav-menu-sub:nth-child(1) {
297348
float: right;
298349
}
299350

300-
.navbar-collapse.collapse {
301-
display: none !important;
302-
}
303-
304-
.navbar-nav > li {
305-
float: none;
306-
}
307-
308351
.collapse.in {
309352
display: block !important;
310353
}
@@ -375,7 +418,7 @@ ul.icl-nav-menu-sub:nth-child(1) {
375418
}
376419
}
377420

378-
@media screen and (max-width: 698px) {
421+
@media screen and (max-width: 659px) {
379422
.menu-box {
380423
top: 180px;
381424
}

examples/template/header.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<nav class="navbar navbar-static-top">
1+
<nav class="navbar navbar-static-top lite">
22
<div class="nav-header">
33
<div class="navbar-header">
4-
5-
<a class="navbar-brand" target="_blank" href="../../web/index.html">
6-
<span class="project-title vm" id="title">SuperMap iClient 9D</span>
7-
</a>
8-
<div id="suffix-title"></div>
4+
<div class="navbar-title">
5+
<a class="navbar-brand" target="_blank" href="../../web/index.html">
6+
<span class="project-title vm" id="title">SuperMap iClient 9D</span>
7+
</a>
8+
<div id="suffix-title"></div>
9+
</div>
910
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
1011
aria-expanded="false">
1112
<i class="fa fa-bars"></i>
@@ -61,7 +62,7 @@
6162
$(document).ready(function () {
6263
if (identification && identification.name) {
6364
var suffixHeader = document.getElementById("suffix-title");
64-
suffixHeader.innerText = (notFor.indexOf(identification.name) < 0 ? "for " : "" ) + identification.name;
65+
suffixHeader.innerText = (notFor.indexOf(identification.name) < 0 ? "for " : "") + identification.name;
6566
}
6667
});
6768
</script>

0 commit comments

Comments
 (0)