Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Ламерские вопросы » Меню в бутерброде на смартфоне всегда развернуто!?

Меню в бутерброде на смартфоне всегда развернуто!?


     16.03.2018    Все вопросы » Ламерские вопросы    1389

вопрос
Всем привет!
Вопрос скорее ламерский, каков я и указал в "теме" =)
В общем есть дизайн : Сounstruct Сity.
В нем установлено Горизонтальное выпадающее меню при наведении... Но...
Когда заходишь с мобильной версии или планшета, появляется так называемый бутерброд...
Когда нажимаю в мобильном на сей бутер, у меня выпадает список категорий и подкатегорий...
В общем все в кучу...
На десктопе отображается вот так...
Меню в бутерброде на смартфоне всегда развернуто!?

А в мобильной версии вот так:
Меню в бутерброде на смартфоне всегда развернуто!?

Ковырял CSS и JS, но похоже ни хрена ума не хватает!!!

Ответа пока нет


4 комментария

RayZzor
Юзер

RayZzor - 17 марта 2018 20:50 -

$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});

startget
Юзер

startget - 17 марта 2018 21:58 -

уберите $(document).ready(function(){ .... });

RayZzor
Юзер

RayZzor - 17 марта 2018 22:24 -

startget,
Никаких изменений...
Кеш чистил...
оставил код вида:
var touch = $('#touch-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

RayZzor
Юзер

RayZzor - 17 марта 2018 22:25 -

body{background:url('http://pcvector.net/uploads/demo/scripts/menu_and_navigation/responsive_multi_level_flat_menu/bkg.jpg');
}
.column-clear{clear:both;}
.clear{overflow: hidden;}

.mainWrap{
width:960px;
margin:0 auto;
}
.title{
margin:100px 0 20px 0;
text-align:center;
color:#3E4156;
}
.back{
text-align:center;
}

nav{
display:block;
margin-top: 100px;
background:#3E4156;
}
.menu{
display:block;
padding: 0;
}
.menu li{
display: inline-block;
position: relative;
z-index:100;
}
.menu li:first-child{
margin-left:0;
}

.menu li a {
font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;

-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover > a{
color:#ffffff;
background:#9CA3DA;
}

.menu ul {
display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #fff;
}

.menu ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {
font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;
}
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.menu li:hover > ul{
display: block;
}
.menu ul ul {
left: 149px;
top: 0px;
}
.mobile-menu{
display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{
background:#3E4156;
color:#ffffff;
text-decoration:none;
}
@media (min-width: 768px) and (max-width: 979px) {

.mainWrap{
width:768px;
}
.menu ul {
top:37px;
}
.menu li a{
font-size:12px;
padding:8px;
}
}

@media (max-width: 760px) {

.mainWrap{
width:auto;
padding:50px 20px;
}
.menu{
display:none;
}
.mobile-menu{
display:block;
margin-top:100px;
}
nav{
margin:0;
background:none;
}
.menu li{
display:block;
margin:0;
}
.menu li a {
background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;
}
.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;
}
.menu ul {
display:block;
position:relative;
top:0;
left:0;
width:100%;
}
.menu ul ul {
left:0;
}

}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх