[英]How do you convert a mobile responsive vertical stack menu to a hamburger style responsive menu?
所以我為一個網站創建了一個導航菜單,它是移動響應的(僅限 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>
嘗試這個
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
</ul>
</div>
</nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.