當我添加圖形標題時，反應性漢堡包菜單中斷
[英]Reactive Hamburger Menu breaks when I add Graphical Header
問題描述
我正在使用JavaScript / CSS / HTML，需要在右上角創建一個反應性的“漢堡包”菜單欄。
這里的目標是顯示帶有“家庭服務圖庫評論聯系人”的圖形標題...然后，由於移動設備而導致屏幕尺寸變小或調整屏幕尺寸時，這些屏幕應該消失，僅留下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>
這是Hamburger Bar 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>
1 個解決方案
解決方案1
0 2019-01-24 21:54:38
希望對您有所幫助，我從我的一個項目中獲取了此代碼。 其響應式導航欄（為移動用戶提供振動！）
$(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 pi{ 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>
當我嘗試打開漢堡菜單時，它不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.