Мобильное меню для сайта

На просторах интернета есть много плагинов, дополнений и просто решений по созданию мобильного меню для сайта, но ни один вариант мне не подошел. Пришлось писать что-то свое. 

Какие были поставлены задачи:

- вертикальное меню с выезжающим подменю, выдвигаться должно вниз, а не появляться сбоку,

- меню должно разворачиваться при клике на кнопку "+", клик на пункт меню ведет на отдельную страницу.

Такое меню отлично подойдет под мобильную версию сайта, так как там не работает эффект :hover и в тоже время видны главные пункты меню, которые обычно скрывают за кнопкой МЕНЮ. Да и просто это вертикальное меню можно использовать на сайте, кому не нравится навигация при помощи ховер-эффектов.

Мое решение может быть не идеальным, но оно работает :)

Не забываем подключить библиотеку jQuery.

Код html:

	<ul class="menu">
	    <li>
	        <a href="">Сумки</a>
	        <ul>
	            <li><a href="">Обувь</a></li>
	            <li><a href="">Шарфы</a></li>
	            <li><a href="">Одежда</a></li>
	            <li><a href="">Аксессуары</a></li>
	            <li><a href="">Обувь</a></li>
	        </ul>
	    </li>
	    <li>
	        <a href="">Обувь</a>
	        <ul>
	            <li><a href="">Обувь</a></li>
	            <li><a href="">Шарфы</a></li>
	            <li><a href="">Одежда</a></li>
	            <li><a href="">Аксессуары</a></li>
	            <li><a href="">Обувь</a></li>
	        </ul>
	    </li>
	    <li><a href="">Шарфы</a></li>
	    <li><a href="">Одежда</a></li>
	    <li><a href="">Аксессуары</a></li>
	</ul>

Оформим наше меню для мобильного устройства, кнопка "+" будет справа, а текст выравниваем по центру. Код CSS будет такой:

	.menu {
	    margin: 0;
	    padding: 0;
	    text-align: center;
	}
	.menu>li{
	    height: 40px;
	    margin-bottom: 1px;
	    list-style: none;
	}
	.menu li.sub-menu{
	    height: auto;
	}
	.menu li.sub-menu span{
	    float: right;
	    font-size: 20px;
	    width: 40px;
	    text-align: center;
	    padding-top: 8px;
	    cursor: pointer;
	    font-weight: 300;
	    color: #ADADAD;
	    position: absolute;
	    right: 10px;
	}
	.menu a{
	    text-align: center;
	    font-size: 14px;
	    text-decoration: none;
	    font-family: 'Verdana';
	}
	.menu>li>a{
	    line-height: 40px;
	    font-weight: 300;
	    padding: 0 12px;
	    background: #F6F6F6;
	    display: block;
	    height: 40px;
	    font-size: 14px;
	}
	.menu ul{
	    display: none;
	    margin: 6px 0;
	    padding: 0;
	}
	.menu li:hover>a{
	    color: #EF0505;
	    transition: color 0.5s ease;
	}
	.menu ul li{
	    font-weight: 300;
	    line-height: 20px;
	    list-style: none;
	}

Стиль меню можно оформить по своему вкусу. Для отображения на мониторах или планшетах нужно ограничить ширину вертикального меню и выравнять текст по левому краю.

И самое главное, небольшой javascript код для нашего выпадающего меню:

	jQuery(function($) {
	//Hide and Show Sub-Menu

	    $('.menu li').find('ul').parent().addClass('sub-menu');
	    $('.sub-menu').prepend('<span>+</span>');
	    $('.sub-menu').addClass('hide');
	    var menuShow = {
	        show: function(post){
	            $('.sub-menu ul').slideUp();
	            $(post).parent().removeClass('show');
	            $(post).parent().addClass('hide');
	        },
	        hide: function(post){
	            $('.sub-menu').removeClass('show');
	            $('.sub-menu').addClass('hide');
	            $('.sub-menu ul').slideUp();
	            $(post).parent().find('ul').slideDown();
	            $(post).parent().removeClass('hide');
	            $(post).parent().addClass('show');
	        },
	    };
	    $('.sub-menu span').click(function(){
	        if($(this).parent().attr("class") == 'sub-menu show'){
	            menuShow.show(this);
	        }else if($(this).parent().attr("class") == 'sub-menu hide'){
	            menuShow.hide(this);
	        }
	    });
	});

Если вкратце, то скрипт ищет пункт меню где есть суб-меню и добавляет кнопку "+", а далее прописывается функция открывающая и закрывающая наше меню. 

ДЕМО