Это перевод документации к плагину mmenu light. Ссылка для скачивания на GitHub https://github.com/FrDH/mmenu-light

Документация

Приступая к работе

На этой странице документации предполагается, что у вас есть некоторые знания в области HTML, CSS и JavaScript. Если вы новичок в разработке интерфейсов, возможно, не стоит сразу переходить к фреймворку в качестве первого шага - изучите основы, а затем возвращайтесь!

Если вы новичок в использовании плагина mmenu light, пожалуйста, возьмите его копию и ознакомьтесь с руководством.

Создать меню

После запуска плагина для меню доступны два дополнения: navigation и offcanvas.

navigation() Создает навигацию с фиксированным Navbar и скользящим подменом из элементов <nav>, <ul>, <li> и <a> (или<span>). offcanvas() Создает ящик за пределами холста. Этот ящик может быть заполнен любым содержимым.

Обратите внимание, что оба дополнения могут иметь свой собственный набор опций, переменных CSS и методов API.

Опции

Плагин mmenu light, а также дополнения navigation и offcanvas предоставляют набор опций для настройки вашего меню. Значения по умолчанию можно переопределить, передав методу новые значения.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new MmenuLight(
                document.querySelector( "#menu" ),
                "(max-width: 600px)"
            );

            const navigator = menu.navigation({
                // options
            });

            const drawer = menu.offcanvas({
                // options
            });
        }
    );
</script>

Опции для плагина

Параметр	Тип данных	Значение по умолчанию	Описание
node	HTMLElement	null	HTML-элемент, который вы хотите включить в меню вне холста.
mediaQuery	String	"all"	Медиазапрос о том, что должно быть включено меню.

Параметры дополнения navigation

Параметр	Тип данных	Значение по умолчанию	Описание
{
selected	String	"Selected"	Имя класса, которое будет использоваться для поиска выбранного <li>.
slidingSubmenus	boolean	true	Следует ли использовать скользящие подменю (в IE11 должно быть введено значение false).
title	String	"Menu"	Заголовок над главной панелью. Для субменю используется текст в их родительском пункте меню.
theme	String	"light"	Используемая цветовая гамма. Возможные значения: "light" или "dark"
}

Опции для дополнения offcanvas

Параметр	Тип данных	Значение по умолчанию	Описание
{
position	String	"left"	Позиция для меню. Возможные значения: "left" или "right"
}

Стиль

Изменить стиль плагина mmenu light довольно просто, просто переопределите некоторые значения и переменные CSS.

<style>
    .mm {
        background: #ffe;
        color: #330;
        --mm-spn-item-height: 46px;
        --mm-ocd-max-width: 500px;
    }
</style>

CSS для дополнения navigation

Переменные	Тип данных	Значение по умолчанию	Описание
Значения
background-color	color	#f3f3f3	Фон - цвет для меню.
color	color	#444	Цвет текста и границ в меню.
Переменные
--mm-spn-item-height	pixels	50px	Высота для пунктов меню.
--mm-spn-item-indent	pixels	20px	Отступы для пунктов меню.
--mm-spn-line-height	pixels	24px	Высота строки для текста в меню.

CSS для дополнения offcanvas

Переменные	Тип данных	Значение по умолчанию	Описание
Значения
top	pixels	0	Расположите его относительно верхней части страницы.
bottom	pixels	0	Расположите его относительно нижней части страницы.
Переменные
--mm-ocd-width	percentage	80%	Ширина меню.
--mm-ocd-min-width	pixels	200px	Минимальная ширина меню.
--mm-ocd-max-width	pixels	440px	Максимальная ширина меню.

API

После вызова дополнений для каждого из них становится доступным API. С помощью этого API вы можете вызывать методы надстройки для управления плагином вручную.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new MmenuLight(
                document.querySelector( "#menu" )
            );

            const navigator = menu.navigation();
            const drawer = menu.offcanvas();

            navigator.openPanel(
                document.querySelector( "#ul" );
            );

            document.querySelector( 'a[href="#menu"]' )
                .addEventListener( 'click', ( evnt ) => {
                    evnt.preventDefault();
                    drawer.open();
                });
        }
    );
</script>

Методы API для дополнения navigation

Метод( аргументы )	Тип данных	Значение по умолчанию	Описание
openPanel			Вызовите этот метод, чтобы открыть панель в меню.
(
panel	HTMLElement	null	Панель (UL) для открытия.
)

Методы API для дополнения offcanvas

Метод( аргументы )	Тип данных	Значение по умолчанию	Описание
open			Вызовите этот метод, чтобы открыть меню.
close			Вызовите этот метод, чтобы закрыть меню.

Руководство

Вступление

В этом руководстве мы создадим облегченное мобильное меню с помощью плагина mmenu light. Просто следуйте инструкциям шаг за шагом, и оно будет готово к работе в кратчайшие сроки.

Давайте начнем с создания html-файла и добавим некоторую базовую разметку для заголовка и содержимого. Для этого урока мы будем предполагать, что у вас уже есть таблица стилей (называемая my-styles.css) для оформления этой разметки.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="/path/to/styles.css" rel="stylesheet" />
    </head>
    <body>
        <div id="page">
            <div id="header"></div>
            <div id="content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
    </body>
</html>

Затем добавьте файлы mmenu .js и .css. Чаще всего файлы .css расположены в <head>, а файлы .js расположены перед закрывающим <body>.

<!DOCTYPE html>
<html>
    <head>
        ...
        <link href="/path/to/mmenu-light.css" rel="stylesheet" />
    </head>
    <body>
        ...
        <script src="/path/to/mmenu-light.js"></script>
    </body>
</html>

<body>
    <div id="page">
        <div id="header">
            <nav id="menu">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about/">About us</a>
                        <ul>
                            <li><a href="/about/history/">History</a></li>
                            <li><a href="/about/team/">The team</a></li>
                            <li><a href="/about/address/">Our address</a></li>
                        </ul>
                    </li>
                    <li><a href="/contact/">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div id="content">
            ...
        </div>
    </div>
</body>

Обратите внимание на идентификатор "menu" в <nav>, мы будем использовать его позже, чтобы нацелиться на меню при запуске плагина.

Открытие подменю

Плагин предполагает, что каждое <a> в меню должно быть кликабельным, поэтому он добавляет якорь, чтобы открыть подменю рядом с <a>. Если на нашем веб-сайте нет главной страницы для раздела « About us», мы можем заменить <a href="/about/"> на <span>. Таким образом, якорь для открытия подменю заполнит весь <li>.

<nav id="menu">
    <ul>
        ...
        <li><span>About us</span>
            <ul>
                ...
            </ul>
        </li>
        ...
    </ul>
</nav>

Запуск плагина

Теперь, когда мы создали html-файл, включили все необходимые css и js-файлы и настроили разметку для страницы и меню, мы можем запустить плагин. Чаще всего вы пишете JavaScript в отдельном js-файле, но в этом руководстве мы напишем его в виде встроенного <script>.

Давайте создадим экземпляр плагина mmenu light и снабдим его элементом меню. Помните идентификатор "menu" в <nav>? Теперь мы используем его для настройки меню.

Кроме того, мы сообщаем плагину, когда меню должно быть включено, указав медиа-запрос во втором аргументе. В этом руководстве мы хотим, чтобы меню отображалось и функционировало как мобильное меню вне холста только в том случае, если ширина окна составляет менее 600 пикселей.

<script>
    const menu = new MmenuLight(
        document.querySelector( "#menu" ),
        "(max-width: 600px)"
    );
</script>

Для функциональности навигации (стилизованные представления списков, фиксированная панель навигации и скользящие подменю) нам необходимо активировать дополнение navigation.

<script>
    const navigator = menu.navigation({
        // options
    });
</script>

Для работы вне холста нам необходимо активировать дополнение offcanvas.

<script>
    const drawer = menu.offcanvas({
        // options
    });
</script>

Как навигационные, так и оффлайн дополнения предоставляют набор собственных опций. Ознакомьтесь с документацией для получения дополнительной информации о параметрах.

Открыть меню

Теперь, когда мы настроили наше меню, нам нужно иметь возможность открыть его, щелкнув по привязке. Итак, давайте добавим символ <a> в наш заголовок и привяжем к нему слушатель событий для открытия меню.

<body>
    <div id="page">
        <div id="header">
            <a href="#menu">Open the menu</a>
            <nav id="menu">
                ...
            </nav>
        </div>
        ...
    </div>
    ...
    <script>
        document.addEventListener(
            "DOMContentLoaded", () => {
                ...
                document.querySelector( "a[href='#menu']" )
                    .addEventListener( "click", ( event ) => {
                        event.preventDefault();
                        drawer.open();
                    });
            }
        );
    </script>
</body>

Закрыть меню

По умолчанию меню автоматически закрывается после нажатия на все еще видимую часть страницы. Вызовите метод close, чтобы закрыть меню вручную.

<script>
    drawer.close();
</script>

Для получения полного обзора всех методов ознакомьтесь с документацией.

Результат

Теперь у вас есть html-файл, который выглядит примерно так.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="/path/to/styles.css" rel="stylesheet" />
        <link href="/path/to/mmenu-light.css" rel="stylesheet" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                <a href="#menu">Open the menu</a>
                <nav id="menu">
                    <ul>
                        <li class="Selected"><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <h1>The title</h1>
                <p>Some content.</p>
            </div>
        </div>

        <script src="/path/to/mmenu-light.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    const menu = new MmenuLight(
                        document.querySelector( "#menu" ),
                        "(max-width: 600px)"
                    );

                    const navigator = menu.navigation();
                    const drawer = menu.offcanvas();

                    document.querySelector( "a[href='#menu']" )
                        .addEventListener( "click", ( evnt ) => {
                            evnt.preventDefault();
                            drawer.open();
                        });
                }
            );
        </script>
    </body>
</html>

Мобильное меню mmenu light