2
我想創建一個非常通用的超級菜單使用純HTML/css而不使用引導程序（出於某種原因沒有在線教程，所以我自己做一個）。我已經設法正確地設置了我的導航，它的工作原理是響應式的，但我無法弄清楚如何讓移動版本給我一個菜單選項，而不是像現在這樣提供所有鏈接。我會發佈下面的代碼，如果任何人都可以告訴我要添加什麼才能讓它發生，那真棒！巨型菜單響應式導航幫助（無引導）
<div class="menu style">
<ul class="menu">
<!-- Mega Menu start. copy section between comments to create new heading-->
<li><a href="#">Option 1</a>
<div class="mega-menu">
<div class="col-1">
<h4>Header 1</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 2</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 3</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 4</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
</div>
<li><a href="#">Option 2</a>
<div class="mega-menu">
<div class="col-1">
<h4>Header 1</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 2</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 3</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
</div>
<li><a href="#">Option 3</a>
<div class="mega-menu">
<div class="col-1">
<h4>Header 1</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 2</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
<div class="col-1">
<h4>Header 3</h4>
<ol>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ol>
</div>
</div></ul></div>
這裏是CSS
@font-face {
font-family: 'raleway';
src: url(fonts/raleway/raleway.ttf) format('truetype');
src: url(fonts/raleway/raleway.otf) format('opentype');
src: url(fonts/raleway/raleway.woff) format('woff');
}
.menu{
display:block;
position:relative;
}
.menu,.menu ul{
margin:0;padding:0;
list-style:none;
position:relative
}
.menu ul a{float:left}
.menu .mega-menu a{
float:none;
padding:0
}
.menu .mega-menu,.menu .mega-menu ol li{
opacity:0;
visibility:hidden;
display:none ! important/9;
}
.menu li:hover>.mega-menu,.menu li:hover>.mega-menu ol li{
opacity:1;
visibility:visible;
display:block ! important/9
}
.menu ul:after{
content:"";
clear:both;
display:block}
.menu ul li{
float:left;
}
/*Main heading css*/
.menu ul li a{
display:block;
padding:14px 20px 15px 20px;
font-family:'raleway',arial,sans-serif;
color:#fff;
font-size:1.1em;
font-weight:bold;
text-decoration:none
}
/*dropdown section css*/
.mega-menu{
position:absolute;
top:100%;
padding:18px 11px;
background-color:rgba(0,0,0,.8)
}
.mega-menu ol{
list-style:none;
padding:0
}
.mega-menu ol li{width:100%;}
/*dropdown section text css*/
.mega-menu ol li a{
font-size:.9em;
line-height:18px;
}
.mega-menu ol li:hover,.mega-menu ol li a{
color:#fff;
padding:0;
background-image:none
}
/*sub header css*/
.mega-menu div h4{
font-family:'raleway',arial,sans-serif;
font-size:1.15em;
font-weight:bold;
color:#f7b50d;
border-bottom:1px solid #e4e4e4;
padding:0 0 8px 0;
margin:0 0 10px 0
}
.mega-menu .col-1{width:135px}
.mega-menu .col-1{
float:left;
margin:0 9px
}
@media only screen and (max-width: 767px){
.menu ul li{
width:100%;
}
.menu ul li{position:relative}
.menu .mega-menu ol li{height:0}
.menu li:hover>.mega-menu ol li{height:auto}
.mega-menu,.menu ul ul{z-index:100}
.mega-menu{padding:18px 0}
.mega-menu ol li:last-child{margin:0 0 10px 0}
.menu .col-1{
float:left;
margin:0 0 0 5%;width:90%
}
}
/*Also main heading css*/
.style.menu, .style-1.menu ul li {
background-color: #333;
border-top:1px solid #f7b50d;
border-bottom:1px solid #f7b50d;
}
.style.menu ul li a:hover {
color:#f7b50d;
}
這裏是一個codepen我做的太的鏈接。 Code Pen Link
可以用於媒體CSS這個 –
它可以幫助你http://responsivenavigation.net/index.html或嘗試https://css-tricks.com/convert -menu-to-dropdown/ –
@aroveruser像這樣https://jsfiddle.net/e7o93vtz/ –