目前，我的导航栏使用@media screen缩小了页面大小。这很好用，但是当页面非常小时，我希望导航栏折叠成垂直下拉列表，需要点击才能打开。
由于我的情况，我不能使用bootstrap，只有html / css和js。
示例jsfiddle
答案 0 :(得分：0)
所以，你需要一些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()">☰</a>
</div>
答案 1 :(得分：0)
首先使用@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>
希望这有帮助
答案 2 :(得分：-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>