使導航欄與JS崩潰

目前我的導航欄縮小爲頁面大小，使用@media screen。這工作正常，但是當頁面非常小時，我想讓導航欄摺疊爲垂直下拉式，需要點擊才能打開。使導航欄與JS崩潰

由於我的情況，我不能使用引導程序，只是html/css和js。在jsfiddle

2017-09-01 Charlie

嗨查理。這不是一個完整的問題。關於您嘗試或實施的內容沒有足夠的細節。我會請你做一個基礎研究，並嘗試首先實現某些東西。當你無法實施任何事情時，請向我們詳細介紹你所面臨的問題。這將使我們能夠更好地幫助你。請參閱[如何提問]（https://stackoverflow.com/help/how-to-ask）頁面以獲得澄清此問題的幫助。 – viCky

我已經嘗試過了，我可以找到的每個示例都使用bootstrap，顯然是因爲它更簡單，但由於我的情況，我無法使用bootstrap。有一個這樣的線程，如何在沒有引導的情況下執行此任務的答案對於我的情況中的很多人非常有用 – Charlie

-2

例如根據您的需求量的嘗試這些....和修改。

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

li { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: red; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style> 
</head> 
<body> 

<ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li class="dropdown"> 
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
    <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
    </div> 
    </li> 
</ul> 

<h3>Dropdown Menu inside a Navigation Bar</h3> 


</body> 
</html>

來源

2017-09-01 11:02:27

謝謝，但不幸的是我需要一個解決方案，不使用引導帶 – Charlie

現在嘗試上面的代碼 –

所以，就需要有一些JavaScript。這是我從w3schools收到的一個工作示例。你可以在這裏閱讀完整的文章：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

基本上你所做的是，你使用媒體查詢在手機視圖中隱藏菜單，改變它的風格，然後使用javascript顯示它們。

你需要JavaScript的菜單下拉切換工作。其餘由CSS處理。

如果您有任何疑問，可以將它們置於評論中。

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
 
function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

/* Add a black background color to the top navigation */ 
 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
/* Style the links inside the navigation bar */ 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
/* Change the color of links on hover */ 
 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
/* Hide the link that should open and close the topnav on small screens */ 
 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ 
 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ 
 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive {position: relative;} 
 
    .topnav.responsive a.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div>

來源

2017-09-01 11:23:46 viCky

第一隱藏使用@media和改變的元素到列表視圖

@media screen and (max-width: 850px){ 
    //replace max width with your width 

    ul li { 
    display: block; 
    } 
    ul { 
    display: none; 
    } 


}

Showmenu功能的導航欄元件切換導航欄的元素的可見性

function showmenu() 
{ 
    var x = document.getElementById('myUL'); 
    if (x.style.display == 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
}

還添加一個按鈕來觸發功能

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<button onclick = 'showmenu();'>click me to see menu</button> 
    <ul id='myUL'> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</head> 


</html>

希望這有助於

來源

2017-09-01 11:29:04

使導航欄與JS崩潰

回答

相關問題