Я получаю всплывающее меню вновь появляться над меню, нажав значок гамбургера. Как я могу заставить меню только что появ ⇐ Html

[Anonymous]

HTML и CSS ниже, у меня есть проблемы с мобильным представлением. Нажмите на меню гамбургера, всплывающее окно автоматически появляется в верхней части меню внизу. Я попытался использовать Z-индекс, чтобы включить меню в верхней части всплывающего окна, но я не хочу, чтобы всплывало появилось при нажатии кнопки гамбургера. У моего кода нет кнопки в HTML, но он по -прежнему функционирует как кнопка. Я использую Target: класс, чтобы сделать гамбургер целью #menu, и вы можете увидеть ее в HTML. Но создание только меню, открытого на мобильном представлении, не происходит, всплывающее окно также запускается. < /P>




**hamburger target menu**




**code for the popup menu** *I am trying to include a popup here*



×











. **the menu html code is included below. **

• 
  
  
• Home
• Join Our Team
• Life Coaching
• Products
• Wellness Consult
• About
• Blog
• [url=mailto:[email protected]]Contact[/url]
• ×

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%;
height: auto;
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;
}
}

}

/* On desktop, show the menu by default and adjust styling as needed */
@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-decoration: none;
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;
}
}

}

< /code>


Подробнее здесь: https://stackoverflow.com/questions/794 ... on-how-can