admin管理员组文章数量:1302272
HTML and CSS is below, I have issues upon mobile view. Upon click the hamburger menu the popup automatically appears on top of the menu underneath.
I started with the HTML code, and then the css. I tried using a z-index to maybe include the menu on top of the popup, but I don't want the popup to appear when clicking the hamburger button. My code doesn't have a button in the HTML but it still functions like a button fine. I am using the target: class to make the hamburger target the #menu and you can see it in the HTML. But making just the menu open on mobile view isn't happening, the popup also gets triggered.
hamburger target menu
<!-- HTML code -->
<!-- The link to toggle the menu -->
<!-- hamburger icon content -->
<a class="hamburger" href="#menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
code for the popup menu
I am trying to include a popup here
<!--popup menu-->
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#popup1">×</a>
<div class="content">
<img src=".jpg" alt="coffee"
style="width:100%">
<span class="span"><a href=";> <img
src=".jpg"></a></span>
</div>
</div>
</div>
**the menu html code is included below. **
<!-- The menu itself -->
<div id="menu" class="menu">
<ul>
<li><a href="/"><img
src=".jpg" alt="Logo image"
height="100" width="150"></a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Join Our Team</a></li>
<li><a href="/">Life Coaching</a></li>
<li><a href="/">Products</a></li>
<li><a href="/">Wellness Consult</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Blog</a></li>
<li><a href="mailto:[email protected]">Contact</a></li>
<li><a class="close2" href="#">×</a></li>
</ul>
</div>
<!--end of html code-->
CSS code is below
@media (max-width: 768px) {
li a {
text-decoration: none;
display: block;
color: #416565;
padding: 8px;
text-decoration: none;
text-align: center;
}
ul {
list-style: none;
top: 40px;
margin: 0;
padding: 0;
width: 200px;
height: auto;
background-color: lightgrey;
min-width: 100%;
left: 50%;
transform: translateX(-50%);
position: relative;
}
/* Change the link color on hover */
li a:hover {
color: #559b98;
}
/* Hide the menu by default on mobile */
.menu {
display: none;
}
/* Style the hamburger menu on mobile */
.hamburger {
position: absolute;
background: white;
border: none;
cursor: pointer;
padding: 10px;
width: 14px; /* adjust to your desired width */
height: 8px; /* adjust to your desired height */
right: 20px;
}
.bar {
position: absolute;
width: 100%;
height: 2px; /* adjust to your desired thickness */
background-color: #333; /* adjust to your desired color */
transition: transform .2s;
margin: 5px auto;
}
.bar:nth-child(1) {
top: 25%;
}
.bar:nth-child(2) {
top: 50%;
}
.bar:nth-child(3) {
top: 75%;
}
/* Show the menu when the target class is applied */
#menu:target {
display: block;
}
.close2 {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
border: none;
color: black;
cursor: pointer;
}
.menu:target .close2 {
display: block;
}
/* Popup code responsive */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:not(:target) {
visibility: visible;
opacity: 1;
}
.popup {
top: 35px;
margin: 1px auto;
padding: 5px;
border-radius: 0;
width: 59vh;
position: relative;
transition: all 5s ease-in-out;
z-index: 1;
overflow: auto;
}
.popup .close {
position: absolute;
top: 0;
right: 20px;
transition: all 200ms;
font-size: 40px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 3;
}
.popup .close:hover {
color: #637E76;
}
.popup .content {
max-height: 100%;
width: 95%;
justify-content: center;
/* text-align: center; */
margin: auto;
}
.popup .content img {
margin: 5px;
}
.popup .span a img {
position: absolute;
width: 45%;
bottom: 5%;
right: 25%;
}
#popup1 {
animation-name: welcome;
animation-duration: 2s;
}
@keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
/* Desktop Styles */
@media (min-width: 768px) {
.close2 {
display: none;
}
.menu {
display: block;
position: fixed;
top: 60;
left: 10;
width: 200px;
height: 85%;
background-color: white;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.hamburger {
display: none;
}
li a {
text-decoration: none;
display: block;
color: #416565;
padding: 8px 1px;
text-align: left;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
background-color: white;
min-width: 50%;
height: auto;
left: 50%;
transform: translateX(-50%);
position: relative;
}
/* Change the link color on hover */
li a:hover {
color: #559b98;
}
/* Popup code responsive */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:not(:target) {
visibility: visible;
opacity: 1;
}
.popup {
top: 35px;
margin: 1px auto;
padding: 5px;
border-radius: 0;
width: 59vh;
position: relative;
transition: all 5s ease-in-out;
z-index: 1;
overflow: auto;
}
.popup .close {
position: absolute;
top: 0;
right: 20px;
transition: all 200ms;
font-size: 40px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 3;
}
.popup .close:hover {
color: #637E76;
}
.popup .content {
max-height: 100%;
width: 95%;
justify-content: center;
/* text-align: center; */
margin: auto;
}
.popup .content img {
margin: 5px;
}
.popup .span a img {
position: absolute;
width: 45%;
bottom: 5%;
right: 25%;
}
#popup1 {
animation-name: welcome;
animation-duration: 2s;
}
@keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
本文标签：
版权声明：本文标题：html - I get a popup menu reappear above the menu upon clicking hamburger icon. How can I get the menu to just appear only? - St 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741689119a2392616.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论