使导航栏与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崩溃

回答

相关问题