Меню в шапке

Гамбургер меню

Пример меню - для демонстрации нажмите на него.

Гамбургер меню на jQuery, боковое меню

Данный скрипт предназначен для создания всплывающего бокового меню в мобильной версии сайта. Но его также можно встроить и в пк версии сайта.

Все мы встречали в современных сайтах так называемое гамбургер-меню - кнопока в виде трех горизонтальных полос. При нажатии на такую кнопку слева от сайта плавно выезжает боковое меню, внутри которого можно поставить не только ссылки на основные разделы сайта, но и произвольный контент - например контакты или кнопки поделиться.

Итак, чтобы подключить меню на сайте вам понадобится подключить mmenu.js (не забудьте библиотеку jquery) и menu-style.css. После скрипта понадобится прописать код инициализации меню:

<script type="text/javascript">
    $(function() {
        $('nav#menu').mmenu();
    });
</script>

Чтобы добавить кнопку вызова бокового меню поставьте ссылку: <a href="#menu"></a> в требуемом месте.

И сам код бокового меню выглядит так (его можно поставить в любом месте):

<nav id="menu">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li>
            <a href="/contacts">Контакты</a>
            <ul>
                <li><a href="/history/">История</a></li>
                <li><a href="/team/">Отзывы</a></li>
            </ul>
        </li>
    </ul>
</nav>

Если все сделаете правильно, то при нажатии на меню, слева появится боковое меню.

Если вы используете какой-либо другой элемент NAV, например a DIV, вы должны указать это в configuration.menuNodetypeопции:

$("#my-menu").mmenu({
    configuration: {
        menuNodetype: "div"
    }
});

Подзаголовок в меню. Чтобы элемент отображался как метка без ссылки, добавьте класс "Label"в li.

Если нужен счетчик количества дочерних ссылок перед родительской, используйте:

$("#my-menu").mmenu({
    configuration: {
        counterClass: "bubble"
    }
});

Чтобы открыть меню сразу при загрузке старницы, используйте: $("селектор").trigger("open"); или close - чтобы закрыть.

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