垂直導航抽屜使用css，bootstrap，html

我想創建垂直導航抽屜，它將像下面的圖像一樣打開底部到頂部。垂直導航抽屜使用css，bootstrap，html

我很新來引導。我嘗試了下面的代碼，但它從左向右打開。

請仔細閱讀以下代碼。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {margin:0;} 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

ul.topnav li {float: left;} 

ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #555;} 

ul.topnav li.icon {display: none;} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(:first-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 
</style> 
</head> 
<body> 

<ul class="topnav" id="myTopnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
    </li> 
</ul> 

<div style="padding-left:16px"> 
    <h2>Responsive Topnav Example</h2> 
    <p>Resize the browser window to see how it works.</p> 
</div> 

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script> 

</body> 
</html>

我也試過this鏈接，但沒有運氣。

請給我一些參考或提示。

來源

2016-07-30 Sandip Armal Patil

這應該工作：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {margin:0;} 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    background-color: #333; 
} 

ul.topnav li {float: left;} 

ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #555;} 

ul.topnav li.icon {display: none;} 

@media screen and (max-width:680px) { 
    ul.topnav li:not(:first-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.topnav.responsive {position: absolute; bottom: 0px;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
} 
</style> 
</head> 
<body> 

<ul class="topnav" id="myTopnav"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
    </li> 
</ul> 

<div style="padding-left:16px"> 
    <h2>Responsive Topnav Example</h2> 
    <p>Resize the browser window to see how it works.</p> 
</div> 

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script> 

</body> 
</html>

我改變了ul.topnav.responsive位置是絕對的（它也可以被固定，並ul.topnav的位置，並給了它一個width: 100%，我都設置的位置元素是bottom: 0px。

這可能，但因爲它應該使用一個外部的樣式表進行重構和JavaScript文件，並直接有AIS造型上a這是不好的做法，這也是不好的做法，有href="javascript:void(0);" ，因爲鏈接只是觸發javascript函數，爲什麼不使用按鈕，或者如果你想使用a標籤，只需刪除href。

來源

2016-07-30 14:58:51 Oskar

垂直導航抽屜使用css，bootstrap，html

回答

相關問題