Возникли проблемы с настройкой переключаемого меню для посетителей с мобильных устройств
Изучение и тестирование кодов HTML, CSS и JavaScript, необходимых для превращения навигационного меню в переключаемое меню на экранах мобильных устройств.
В настоящее время возникли проблемы из-за того, что меню nav отображает названия страниц без необходимости предварительного нажатия кнопки переключения меню.
function toggleMenu() {
var menu = document.getElementById("menu");
menu.classList.toggle("active")
}nav {
background-color: #333;
color: whitesmoke;
}
#menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
background-color: black;
position: relative;
}
.menu li a:hover {
color: black;
background-color: white;
}
.menu li {
margin-right: 20px;
}
.menu li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu-toggle {
display: none;
}
#menu li {
padding: 12px;
}
#menu li>a {
color: white;
text-decoration: none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: medium;
padding: 10px;
}
#menu li>a:hover {
background-color: white;
color: black;
border-radius: 20px 20px 20px 20px;
}
@media only screen and (max-width: 768px) {
.menu-toggle {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
color: white;
position: relative;
background-color: black;
}
.menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%
}
.menu li {
margin: 10px 0;
}
.menu.active {
display: flex;
}
.menu-toggle {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
color: white;
position: relative;
background-color: black;
}
}<div class = "menu-toggle" onclick = "toggleMenu()">
<span>☰ Menu</span>
</div>
<nav>
<!--questo è il menù-->
<ul id = "menu" class = "menu">
<li><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a></li>
<li><a href = "#">CONTACTS</a></li>
</ul>
</nav>Можете ли вы, пожалуйста, быстро просмотреть и сообщить мне, что мне следует отредактировать, чтобы «ДОМ, О ПРОЕКТЕ, КОНТАКТЫ» исчезали, когда ширина экрана меньше 768 пикселей, чтобы они могли появляться только после щелчка по символу переключаемого меню?
Я проверил учебные материалы w3schools, и в моем коде все выглядит нормально. Но я, должно быть, что-то пропустил.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
CSS для id #menu перезаписывает стили класса .menu.
Чтобы исправить это, просто удалите всю часть #menu { … } из стилей, поскольку все здесь уже применено к классу .menu позже.
Отредактированный CSS:
nav {
background-color: #333;
color: whitesmoke;
}
.menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
background-color: black;
position: relative;
}
.menu li a:hover {
color: black;
background-color: white;
}
.menu li {
margin-right: 20px;
}
.menu li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu-toggle {
display: none;
}
#menu li {
padding: 12px;
}
#menu li>a {
color: white;
text-decoration: none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: medium;
padding: 10px;
}
#menu li>a:hover {
background-color: white;
color: black;
border-radius: 20px 20px 20px 20px;
}
@media only screen and (max-width: 768px) {
.menu-toggle {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
color: white;
position: relative;
background-color: black;
}
.menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%
}
.menu li {
margin: 10px 0;
}
.menu.active {
display: flex;
}
.menu-toggle {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
color: white;
position: relative;
background-color: black;
}
}
У вас возникла проблема с вашей специфичностью весом.
Специфика:
Идентификатор > Класс > тег
CSS-строка 6:
#menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
}
Этот сектор имеет специфику 1.0.0
В ваших медиа-запросах у вас есть:
.menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%
}
который имеет специфику 0.1.0
Более высокая специфичность элемента с идентификатором превзойдет это объявление, поэтому ti никогда не будет применяться. Измените классы .menu на #menu, чтобы специфичность сравнялась!
function toggleMenu() {
var menu = document.getElementById("menu");
menu.classList.toggle("active")
}nav {
background-color: #333;
color: whitesmoke;
}
#menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
background-color: black;
position: relative;
}
.menu li a:hover {
color: black;
background-color: white;
}
.menu li {
margin-right: 20px;
}
.menu li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu-toggle {
display: none;
}
#menu li {
padding: 12px;
}
#menu li>a {
color: white;
text-decoration: none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: medium;
padding: 10px;
}
#menu li>a:hover {
background-color: white;
color: black;
border-radius: 20px 20px 20px 20px;
}
@media only screen and (max-width: 4000px) {
.menu-toggle {
display: block;
text-align: right;
padding: 10px;
cursor: pointer;
color: white;
position: relative;
background-color: black;
}
#menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%
}
.menu li {
margin: 10px 0;
}
#menu.active {
display: flex;
}
}<div class = "menu-toggle" onclick = "toggleMenu()">
<span>☰ Menu</span>
</div>
<nav>
<!--questo è il menù-->
<ul id = "menu" class = "menu">
<li><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a></li>
<li><a href = "#">CONTACTS</a></li>
</ul>
</nav>Вам необходимо изменить:
.menu {
...
}
.menu.active {
...
}
Внутри: @media only screen and (max-width: 768px)
быть:
#menu{
...
}
#menu.active{
}
(см. идентификатор, а не класс)
Изменение «просто» этого параметра приведет к исчезновению пунктов меню на мобильном телефоне, но при нажатии на переключатель меню они не появятся. Может еще что-то нужно исправить дополнительно?
Я, конечно, просто был уверен, что яваскрипт у вас уже есть, а проблема только в css.... Я тоже добавлю функцию, которая это исправит.
не используйте /if else, чтобы добавить inline-style. Уже использованный ОП classList.toggle() отлично справляется с этой задачей и является намного лучшим методом. В качестве альтернативы, даже троичный код сделал бы это намного короче и эффективнее.
технически это не «перезапись». Ключевое слово здесь специфичность. Селектор класса имеет более низкую специфичность, поэтому его даже не начнут применять. При той же специфике селектор, объявленный позже, перезапишет первый.