SEO форум вебмастеров TalkWebber.ru

Чтобы пользоваться всеми его возможностями, необходимо зарегистрироваться. Без регистрации Вы сможете только читать определенные темы. Мы будем благодарны, если Вы примите участие в нашем проекте и будете развивать форум вместе с нами!

  • Хотите поместить баннер на наш сайт или закрепить свою тему с цветом? Зайдите в эту тему!

Многоуровневое меню всегда развернуто

  • Автор темы BMW-M3
  • Дата начала

BMW-M3

Гость
Проверенные
Регистрация
06.11
Сообщения
72
Репутация
11
Возраст
23
#1
Вопрос заключается в следующем...
Есть горизонтальное меню...
При изменении разрешения экрана, или войдя на сайт с телефона, и при нажатии на кнопку меню (бутерброд) , у меня выпадает список категорий и под категорий...
В общем все в кучу.
Не хватает ума похоже править чтобы подкатегории были скрыты в категориях и выпадали только при нажатии...
Попросту аккордеон..
CSS:
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;
    }

}
JavaScript:
$(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');
        }
    });

    
});