Я настроил отзывчивую навигационную панель W3Schools с раскрывающимся списком для сайта моего местного боулинг-клуба , который отлично смотрится и работает на p c и мобильных устройствах.
С одно исключение - на мобильных устройствах подменю изначально скрыты, а затем отображаются при нажатии кнопки. То, что я хотел бы сделать, это закрыть их снова, когда та же кнопка нажата. В настоящее время это может быть достигнуто только путем нажатия в другом месте экрана.
Я довольно новичок в программировании (в частности, Javascript) и не смог найти решение, поэтому любая помощь / предложения будут с благодарностью.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
@media only screen and (max-width: 499px) {
/* Set width of nav */
nav {
min-width: 100%;
}
/* Set width and style of primary container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Insert home icon */
.topnav #homebutton {
line-height: 3rem;
font-size: 2rem;
}
/* Style primary and secondary <a> links */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 0 10px;
text-decoration: none;
font-size: 1rem;
line-height: 3rem;
}
/* Set width and border of primary <a> links */
.topnav>a {
width: auto;
}
/* Set width of dropdown container */
.dropdown {
float: left;
overflow: hidden;
line-height: 3rem;
}
/* Set width, border and style of primary dropdown buttons */
.dropdown .dropbtn {
font-size: 1rem;
border: none;
outline: none;
color: #ffffff;
padding: 0 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
line-height: 3rem;
width: auto;
}
/* Hide and style secondary dropdown container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
z-index: 1;
}
/* Style secondary dropdown <a> links */
.dropdown-content a {
float: none;
color: black;
padding: 0 30px;
text-decoration: none;
display: block;
text-align: left;
line-height: 3rem;
}
/* Style primary links on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: #ffffff;
}
/* Style secondary links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: #000000;
}
/* Display secondary container */
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 499px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 499px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: 1px solid black;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
border-bottom: 1px solid black;
}
}
}
@media only screen and (min-width: 500px) {
/* Set width of nav */
nav {
min-width: 100%;
}
/* Set width and style of primary container */
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
}
/* Insert home icon */
.topnav #homebutton {
line-height: 3rem;
font-size: 1.5rem;
}
/* Style primary and secondary <a> links */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 0 0;
text-decoration: none;
font-size: 1rem;
line-height: 3rem;
}
/* Set width and border of primary <a> links */
.topnav>a {
width: calc(14.28571428571429% - 1px);
border-right: 1px solid #ffffff;
}
/* Set width and border of penultimate primary <a> link */
.topnav>a:nth-last-of-type(2) {
width: 14.28571428571429%;
border-right: 0;
}
/* Hide hamburger */
.topnav .icon {
display: none;
}
/* Set width of dropdown container */
.dropdown {
float: left;
overflow: hidden;
line-height: 3rem;
width: 14.28571428571429%;
}
/* Set width, border and style of primary dropdown buttons */
.dropdown .dropbtn {
font-size: 1rem;
border: none;
outline: none;
color: #ffffff;
padding: 0 0;
background-color: inherit;
font-family: inherit;
margin: 0;
line-height: 3rem;
width: calc(100% - 1px);
border-right: 1px solid #ffffff;
}
/* Hide and style secondary dropdown container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
width: 14.28571428571429%;
z-index: 1;
}
/* Style secondary dropdown <a> links */
.dropdown-content a {
float: none;
color: black;
padding: 0 10px;
text-decoration: none;
display: block;
text-align: left;
line-height: 3rem;
}
/* Style primary links on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: #ffffff;
}
/* Style secondary links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: #000000;
}
/* Display secondary container */
.dropdown:hover .dropdown-content {
display: block;
}
}
<nav>
<div class="topnav" id="myTopnav">
<a href="#" id="homebutton" class="fa fa-home">Item 1</a>
<div class="dropdown">
<button class="dropbtn">Item 2
<i class="fa fa-caret-down"></i>
</button>
<div class="#">
<a href="#">Item 2.1</a>
<a href="#">Item 2.2</a>
</div>
</div>
<a href="#">Item 3</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰
</a>
</div>
</nav>