我正在使用 JavaScript/CSS/HTML，需要在右上角制作一个响应式“汉堡包”菜单栏。
这里的目标是让它显示一个带有“Home Services Gallery Reviews Contact”的图形标题......然后当屏幕尺寸因移动设备而变小，或者调整屏幕尺寸时，那些应该消失，只留下3 行“汉堡包”。
我已经尝试了所有我能想到的移动 DIV 的方法，进行小的更改并保存以确定它在哪里中断，我所能发现的是当图形的 Div 表添加时它中断了
样式属性:
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<title></title>
</head>
<body>
<div class="navbar" id="mynavbar">
<a class="icon" href="javascript:void(0);" onclick="myFunction()">
<div align="right" class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div></a>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
这是汉堡栏 HTML:
<div class="navbar" id="mynavbar">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div align="right" class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
</div>
Photoshop 为图形标题生成的 HTML 表格:
<div class="navbar">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td align="left"><img src="images/logo.jpg" width="300"
height="100" alt="Logo" position="Left"></td>
<td>
<table id="Table_01" width="100%" height="100" border="0"
cellpadding="0" cellspacing="0" align="center">
<tr>
</tr>
<tr>
<td><a href="index.html">
<img src="images/Home.jpg" width="103" height="37"
alt="Home"></a>
</td>
<td><a href="services.html">
<img src="images/Services.jpg" width="130" height="37"
alt="Services"></a>
</td>
<td><a href="Gallery.html">
<img src="images/Gallery.jpg" width="109" height="37"
alt="Gallery"></a>
</td>
<td><a href="Reviews.html">
<img src="images/Reviews.jpg" width="122" height="37"
alt="Reviews"></a>
</td>
<td><a href="Contact.html">
<img src="images/Contact.jpg" width="136" height="37"
alt="Contact"></a>
</td>
</div>
最佳答案
希望这有帮助，我从我的一个元素中获取了这段代码。它是一个响应式导航栏(为移动用户提供振动!)
$(document).ready(function() {
// vibration for mobile
// support for all navigator vibrate veriants
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
// vibrate on tap
$('.vib').click(function() {
navigator.vibrate(50);
});
// nav menu
$("#navButton").click(function() {
$(".navigation").slideToggle("slow", function() {});
});
$(window).on('resize', function() {
if ($(this).width() > 800) {
$('.navigation').css({
'display': 'flex'
});
} else {
$('.navigation').css({
'display': 'none'
});
}
});
});#navButton {
display: none;
text-align: right;
}
#navButton p i{
text-align: right;
font-size: 2.4em;
}
#navButton p span{
position: relative;
top: -6px;
left: -6px;
font-size: 0.8em;
}
/* the bar the nav is located in */
.navigation {
list-style: none;
background-color: #333333;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-end;
padding: 0px;
}
/* links styles */
.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: #ffffff;
justify-content: space-between;
}
/* rows of each link styles */
.navigation li {
list-style-type: none;
display: inline-flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
/* hover over the links */
.navigation a:hover {
background: #444444;
color: #61D6D6;
}
/* if screen is smaller than 800px / tablet */
@media all and (max-width: 800px) {
.navigation li {
display: block;
flex-direction: column;
}
.navigation {
justify-content: space-around;
display: none;
}
#navButton {
display: block;
}
}
/* if screen is smaller than 600px / mobile */
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
display: none;
}
.navigation a {
text-align: center;
padding: 10px;
}
.navigation li:last-of-type a {
border-bottom: none;
}
#navButton {
display: block;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<nav>
<div class="masthead">
<div class="navMenuBox">
<div id="navButton" class="vib">
<p><i class="fas fa-bars"></i> <br><span>menu</span></p>
</div>
</div>
</div>
<ul class="navigation">
<li><a class="vib active" href="#">Link 1</a></li>
<li><a class="vib" href="#">Link 2</a></li>
<li><a class="vib" href="#">Link 3</a></li>
<li><a class="vib" href="#">Link 4</a></li>
</ul>
</nav>关于javascript - 当我添加图形标题时，响应式(Reactive)汉堡包菜单中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54354575/