所以,我有一個簡單的NAV,我試圖添加一個漢堡圖標,只有當屏幕很小時纔會顯示。無法隱藏菜單中的項目
目前,我的漢堡只是單詞菜單,但我想默認情況下隱藏它。但是,我的代碼被顯示覆蓋:inline,代碼中較早。即使我添加!重要。
任何人有任何想法,我怎麼可以隱藏菜單元素?
的jsfiddle https://jsfiddle.net/Lwwgpx9k/
我的代碼如下。
的.html
<div class="nav">
<ul>
<li class="hidden">Menu</li>
<li class="home"><a class="active" href="#">Home</a></li>
<li class="gallery"><a href="#">Gallery</a></li>
<li class="tutorials"><a href="#">Tutorials</a></li>
<li class="about"><a href="#">About</a></li>
</ul>
</div>
的.css
body {
background: #333;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.nav ul {
color: #e6e9e9;
position: fixed;
top: 60px;
padding-left: 5%;
text-align: center;
margin: 0;
}
.nav ul li {
line-height: 35px;
float: left;
width: 120px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 10px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav ul li:hover {
background: #6A1B9A;
color: #e6e9e9;
}
.nav ul li ul {
padding: 0;
position: absolute;
top: 35px;
left: 0;
text-align: left;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
.nav ul li ul li {
width: 200px;
background: #555;
display: block;
color: #e6e9e9;
}
.nav ul li ul li:hover {
background: #6A1B9A;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
transition-delay: 2s;
-webkit-transition-delay: 2s;
/* Safari */
}
.nav a {
font-size: 1.4em;
text-decoration: none;
color: #e6e9e9;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #6A1B9A;
color: #e6e9e9;
}
.nav a.active {
background-color: #6A1B9A;
color: #e6e9e9;
cursor: default;
}
.hidden {
display: none; !important
}
使用引導程序 –
不,我正在使用我在網上找到的菜單腳本,我修改了我的喜好。我也添加了一個JSFiddle鏈接 – level42