【发布时间】：2020-11-29 14:29:43
【问题描述】：
所以我为网站创建了一个导航菜单，它是移动响应的（仅限 CSS）。但是，在响应模式下，它会垂直转换菜单，这很好。我仍然希望菜单垂直堆叠，但是出于专业原因我希望它是汉堡风格。如何将我的响应式菜单更改为汉堡风格？我也希望它只使用 CSS 构建。
我发现了一个使用 javascript 的汉堡样式示例，是否可以仅使用 CSS 来实现？
这是当前的响应式菜单：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
list-style-type: none;
margin-left: -9px;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:x-large;
float:left;
padding-bottom:10px
}
nav a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 700px) {
nav a {
text-align: center;
float: none;
}
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<nav>
<a class="navbar-brand" href="/">
<img src= "logo.png" width="60px" height="50px" class="center" >
</a>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#example">example</a>
<a href="#example">example2</a>
<a href="#example">example</a>
<a style="float:right" href="#form">Form</a>
<a style="float:right" href="#registration">Registration</a>
</nav>
</body>
</html>
这是一个汉堡包示例，我希望我的响应式版本看起来像，但我不确定如何转换：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<nav class="topnav">
<a href="#home" ><img src="logo.png" width="60px" height="40px class="center"></a>
<section id="myLinks">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#example">example</a>
</section>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
<main style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript html css mobile responsive-design