Привет всем.
В данный момент, когда делаю размер страницы < 992px и нажимаю на "Основное Меню", то появляется список подменю. Но, когда мы делаем размер страницы > 992px, то меню пропадает. (из-за slideToggle)
Также есть баг, когда ставлю медиа-запрос на > 992px, то в обычной версии страницы будут открыты оба меню, хотя должно быть открыто то, что мы нажали в моб. версии
Помогите подправить мобильное меню для адаптивки.
Еще раз, кто не понял:
1. Должно быть так изначально - prntscr.com/e7uyii Сейчас Основное закрыто. Проверьте jsfiddle.net/m5o8pwrd/21 2. Нужно, чтобы при клике в моб. версии на Второе меню(как сейчас prntscr.com/e7uzb1) в нормальной версии также было открыто Второе меню ( prntscr.com/e7uzx1 ), и также с Основным меню. 3. Присутствует баг анимации: когда я нажимаю на Основное меню в нормальном режиме, но нет слайда вниз, а просто появление списка... И, если я нажму на Второе меню, то анимация Основного меню также будет криво работать.
$(function() {
$a = $('.side-menu > li > span');
$showlist = $('.side-menu > li > span + ul');
$a.on('click', function() {
if ($(this).next().css('overflow', 'hidden')) {
$(this).next().slideDown(300);
$a.not(this).next().slideUp(300);
}
});
});
$(function() {
$(".mobile").on('click', function() {
$(".side-menu").slideToggle(300);
})
});
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.main-container {
display: flex;
padding: 20px 0;
}
.sidebar {
flex: 3;
}
aside a {
color: #000;
display: block;
padding: 8px 30px;
}
.sidebar aside {
margin-right: 50px;
border: 1px solid #e2e1e1;
cursor: pointer;
background: white;
margin-right: 35px;
}
.mobile {
display: none;
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.our-menu {
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.invisible {
display: none;
}
.sub-menu li {
background: #f7f7f7;
}
.side-menu li {
transition: all .3s;
}
.side-menu li .sub-menu li {
font-style: italic;
font-size: 16px;
}
.side-menu li:hover {
background: #e8e8e8;
}
.side-menu > li > a,
.side-menu > li > span {
padding: 10px 18px;
display: block;
font-size: 18px;
border-top: 1px solid #eeeeee;
}
.active {
background: #e8e8e8;
;
}
.main {
flex: 9;
}
@media (max-width: 992px) {
.our-menu {
display: none;
}
.mobile {
display: block
}
.side-menu {
display: none;
}
.main-container {
display: block;
}
.sidebar aside {
margin: 20px 0px;
}
.sub-menu {
display: none;
}
}
Ссылка на стороннем редакторе: jsfiddle-m5o8pwrd-13
Ответ
Добавил в js $(window).resize(function()
$(function() {
$a = $('.side-menu > li > span');
$showlist = $('.side-menu > li > span + ul');
$a.on('click', function() {
if ($(this).next().css('overflow', 'hidden')) {
$(this).next().slideDown(300);
$a.not(this).next().slideUp(300);
}
});
});
$(function() {
$(".mobile").on('click', function() {
$(".side-menu").slideToggle(300);
})
});
$(window).resize(function() {
if ($(window).width() > 992) {
$('.side-menu').removeAttr('style');
}
if ($(window).width() < 992) {
$('.sub-menu').removeAttr('style');
}
});
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.main-container {
display: flex;
padding: 20px 0;
}
.sidebar {
flex: 3;
}
aside a {
color: #000;
display: block;
padding: 8px 30px;
}
.sidebar aside {
margin-right: 50px;
border: 1px solid #e2e1e1;
cursor: pointer;
background: white;
margin-right: 35px;
}
.mobile {
display: none;
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.our-menu {
padding: 15px 20px;
background: rgba(33, 32, 32, 0.83);
color: #fff;
letter-spacing: 5px;
}
.invisible {
display: none;
}
.sub-menu li {
background: #f7f7f7;
}
.side-menu li {
transition: all .3s;
}
.side-menu li .sub-menu li {
font-style: italic;
font-size: 16px;
}
.side-menu li:hover {
background: #e8e8e8;
}
.side-menu > li > a,
.side-menu > li > span {
padding: 10px 18px;
display: block;
font-size: 18px;
border-top: 1px solid #eeeeee;
}
.active {
background: #e8e8e8;
;
}
.main {
flex: 9;
}
@media (max-width: 992px) {
.our-menu {
display: none;
}
.mobile {
display: block
}
.side-menu {
display: none;
}
.main-container {
display: block;
}
.sidebar aside {
margin: 20px 0px;
}
.sub-menu {
display: none;
}
}
Комментариев нет:
Отправить комментарий