我有一个从高级开发人员那里继承的代码库。我需要有关点击时打开汉堡包的帮助(即在移动/响应式 View 上)。
导航栏在桌面 View 中工作正常,但在移动 View 中无法打开。
我已经研究了几个小时了,但没有用
为了怜悯我,我已经和我的计算机和代码库对话了几个小时
我是一名初级开发人员,因此我缺乏洞察潜在问题的远见。
请问我的代码有什么问题?
#navbar {
color: white;
position: fixed;
top: 0;
height: 60px;
line-height: 60px;
width: 100vw;
z-index: 10;
}
.nav-wrapper {
margin: auto;
text-align: center;
width: 70%;
} @media(max-width: 768px) {
.nav-wrapper {
width: 90%;
}
} @media(max-width: 638px) {
.nav-wrapper {
width: 100%;
}
}
.logo {
float: left;
margin-left: 8px;
font-size: 1.5em;
height: 60px;
letter-spacing: 1px;
text-transform: uppercase;
} @media(max-width: 768px) {
.logo {
/* margin-left: 5px; */
}
}
#navbar ul {
display: inline-block;
float: right;
list-style: none;
/* margin-right: 14px; */
margin-top: -2px;
text-align: right;
transition: transform 0.5s ease-out;
-webkit-transition: transform 0.5s ease-out;
} @media(max-width: 640px) {
#navbar ul {
display: none;
}
} @media(orientation: landscape) {
#navbar ul {
display: inline-block;
}
}
#navbar li {
display: inline-block;
}
#navbar li a {
color: white;
display: block;
font-size: 0.8em;
height: 50px;
letter-spacing: 1px;
margin: 0 20px;
padding: 0 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#navbar li a:hover {
/* border-bottom: 1px solid rgb(28, 121, 184); */
color:white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
/* Animated Bottom Line */
#navbar li a:before, #navbar li a:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
bottom: -1px;
background: white;
}
#navbar li a:before {
left: 0;
transition: 0.7s;
}
#navbar li a:after {
background: rgb(13, 26, 38);
right: 0;
/* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
#navbar li a:hover:before {
background: white;
width: 100%;
transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}
#navbar li a:hover:after {
background: transparent;
width: 100%;
/* transition: 0s; */
}
/*======================================================
Mobile Menu Menu Icon
======================================================*/
@media(max-width: 640px) {
.menuIcon {
cursor: pointer;
display: block;
position: fixed;
right: 15px;
top: 20px;
height: 23px;
width: 27px;
z-index: 12;
}
/* Icon Bars */
.icon-bars {
background: rgb(13, 26, 38);
position: absolute;
left: 1px;
top: 45%;
height: 2px;
width: 20px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.icon-bars::before {
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
top: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
.icon-bars::after {
margin-top: 0px;
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
bottom: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
/* Bars Shadows */
.icon-bars.overlay {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 20px;
animation: middleBar 3s infinite 0.5s;
-webkit-animation: middleBar 3s infinite 0.5s;
} @keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
} @-webkit-keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
}
.icon-bars.overlay::before {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 10px;
animation: topBar 3s infinite 0.2s;
-webkit-animation: topBar 3s infinite 0s;
} @keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
} @-webkit-keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
}
.icon-bars.overlay::after {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 15px;
animation: bottomBar 3s infinite 1s;
-webkit-animation: bottomBar 3s infinite 1s;
} @keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
} @-webkit-keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
}
/* Toggle Menu Icon */
.menuIcon.toggle .icon-bars {
top: 5px;
transform: translate3d(0, 5px, 0) rotate(135deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars::before {
top: 0;
transition-delay: 0.1s;
opacity: 0;
}
.menuIcon.toggle .icon-bars::after {
top: 10px;
transform: translate3d(0, -10px, 0) rotate(-270deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars.overlay {
width: 20px;
opacity: 0;
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}
}
/*======================================================
Responsive Mobile Menu
======================================================*/
.overlay-menu {
background: lightblue;
color: rgb(13, 26, 38);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
padding-right: 15px;
transform: translateX(-100%);
width: 100vw;
height: 100vh;
-webkit-transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.overlay-menu ul, .overlay-menu li {
display: block;
position: relative;
}
.overlay-menu li a {
display: block;
font-size: 1.8em;
letter-spacing: 4px;
/* opacity: 0; */
padding: 10px 0;
text-align: right;
text-transform: uppercase;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
/* -webkit-transition: 0.2s opacity 0.2s ease-out;
transition: 0.2s opacity 0.2s ease-out; */
}
.overlay-menu li a:hover,
.overlay-menu li a:active {
color: rgb(28, 121, 184);
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
<nav id="navbar" class="">
<div class="nav-wrapper">
<!-- Navbar Logo -->
<div class="logo">
<!-- Logo Placeholder -->
<img src="id logos.png">
</div>
<!-- Navbar Links -->
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="About Me.html">About</a></li>
<li><a href="Portfolio page.html">Portfolio</a></li>
</ul>
</div>
</nav>
<!-- Menu Icon -->
<div class="menuIcon">
<span class="icon icon-bars"></span>
<span class="icon icon-bars overlay"></span>
</div>
最佳答案
您需要相应的 javascript 事件监听器来触发菜单上的事件状态...
通常,我通过切换 css 类并让 css 转换处理所有内容来实现这一点。您的代码是一大堆文本,因此我将仅编写一些标记作为示例,您可以根据需要将其应用到您的代码中。
首先,让我们制作一些html:
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
现在一些粗糙的 CSS:
#menu{
display:block;
width:100%;
height:100vh;
position:fixed;
top:0;
left:100%;
z-index:100;
background:#000;
padding:4rem;
transition:.5s;
}
#menu.active{
left:0;
}
#hamburger{
position:relative;
padding:.5rem;
background:#000;
z-index:101;
}
#hamburger span{
width:100%;
height:2px;
background:#fff;
display:block;
margin-bottom:5px;
transition:.5s;
}
#hamburger.active span:nth-child(1){
transform:rotate(-45deg);
}
#hamburger.active span:nth-child(2){
width:0;
}
#hamburger.active span:nth-child(3){
transform:rotate(45deg);
}
现在一些基本的 javascript 监听器(原始 javascript):
document.getElementById('hamburger').addEventListener('click', function(){
document.getElementById('hamburger').classList.toggle('active');
document.getElementById('menu').classList.toggle('active');
});
为简单起见,这是一个现代浏览器示例。 IE pre v10 可能无法处理这个示例,但这对您来说是另一段旅程。
一个 jQuery 例子:
$('#hamburger').click(function(){
$(this).toggleClass('active');
$('#menu').toggleClass('active');
});
总而言之,您基本上什么都听不到您的汉堡包。这些中的任何一个都可能有效,但这实际上只是伪代码。我什么也没测试。但这已经足够了。你应该能够通过这个例子来插入事情的发展。
关于html - 我如何打开一个不想被打开的汉堡包?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55168176/