Мое меню responsove хорошо работает в мобильном меню, но у меня есть одна проблема: при изменении размера браузера на большой размер экрана. мобильное меню все еще отображается. Кто-нибудь знает, почему?
Вот мой код:
CSS
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover>ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
@media only screen and (max-width:479px) {
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
}
HTML:
<a href="#" id="rwd-nav-btn" >☰</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->
<nav class="main-navigation">
<ul class="fr">
<li><a href="">home</a></li>
<li><a href="">articles</a></li>
<li><a href="">portfolio</a></li>
<li>
<a href="">dropdown</a>
<ul>
<li><a href="">home</a></li>
<li><a href="">articles</a></li>
<li><a href="">portfolio</a></li>
<li>
<a href="">dropdown</a>
<ul>
<li><a href="">home</a></li>
<li><a href="">articles</a></li>
<li><a href="">portfolio</a></li>
<li>
<a href="">dropdown</a>
</li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
jQuery:
jQuery(document).ready(function(){
jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');
jQuery('#rwd-nav-btn').click(function(event){
event.preventDefault();
jQuery('.rwd-nav').slideToggle();
});
Отсутствует код, скрывающий меню. Вместо slideToggle
я предлагаю добавить/удалить класс типа "закрыто" и "открыть" и установить mymenu.closed
для display:none
и внутри медиа-запроса установить mymenu.open
для display:block