Меню мобильного просмотра для веб-сайта

89
10

Я делал веб-сайт для электронных приглашений. Сделали все, но застряли в одном месте. Меню рабочего стола отлично работает, но при открытии на мобильном устройстве его не работает. Я нажимаю кнопку меню, ничего не происходит. Ниже приведен снимок экрана.

HTML

<body>

<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">

<nav id="main_menu" class="menugray">
<div id="menu-button" class="menu-opened">

</div>

<ul class="open" style="display: none;">
<li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
<li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
</li>
<li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li>
<li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li>
<li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li>

</ul>

</nav>

CSS

    #main_menu li a span::before {
position: absolute;
top: -100%;
color:#e76b71;
content: attr(data-hover);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

#main_menu:after,
#main_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-button {
position: absolute;
padding-left: 1.25em;
font-size:30px;
top:8px;
right:8px;
display: none;
cursor:pointer;
}
#menu-button:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #333;
border-bottom: 0.135em solid #333;
}

Скриншоты

The three lines on top right are for menu on mobile view. Nothing happens after I click

Если я изменю код на

<ul class="open" style="display: block;">

первоначально это был показ: none

После изменения дисплея: The menu is opened but does not close

Этот вопрос можно задать несколько раз. Но попросите кого-нибудь помочь мне. Я был бы очень благодарен за это.

спросил(а) 2021-01-25T18:57:08+03:00 4 месяца, 2 недели назад
1
Решение
124

Не волнуйтесь, я нашел решение для вас. См. Текущий код:

 <div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;">

<nav id="main_menu" class="menugray">
<label for="open-nav" class="menu-opened" id="menu-button"></label>
<input id="open-nav" class="menu-opened" type="checkbox">
<ul class="open" style="display: none;">
<li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li>
<li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a>
</li>
<li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li>
<li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li>
<li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li>

</ul>

</nav>
</div>

И css:

#main_menu li a span::before {
position: absolute;
top: -100%;
color: #e76b71;
content: attr(data-hover);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

#main_menu:after,
#main_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#menu-button {
position: absolute;
padding-left: 1.25em;
font-size: 30px;
top: 8px;
right: 8px;
cursor: pointer;
}

#menu-button:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #333;
border-bottom: 0.135em solid #333;
}

#open-nav:checked + .open {
display: block !important;
}

#open-nav {
display: none;
}

Ссылка Codepen для вашего предварительного просмотра: https://codepen.io/ziruhel/pen/gXOBVK

ответил(а) 2021-01-25T18:57:08+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема