Создать оригинальное меню иногда довольно сложно, когда у вас нет хорошей идеи или вдохновения. Но этот вопрос можно исправить, поискав другой вдохновляющий дизайн меню или с помощью инструментов. В этом вопросе, jQuery.Mmenu оказывается довольно удобным инструментом.

jQuery.Mmenu — это простой в использовании плагин jQuery для создания скользящего навигационного меню мобильного приложения на вашем веб-сайте. Это красивое креативное меню сделает работу пользователя более приятной и аккуратной.

Начиная

Чтобы начать с jQuery.Mmenu, перейдите на страницу загрузки, и плагин будет загружен автоматически. В этом посте мы попробуем построить базовое меню.

Как и другие плагины jQuery, чтобы использовать это, вы должны включить необходимые зависимости на свой сайт. Это jQuery, jquery.mmenu.js а также jquery.mmenu.css. Фрагмент выглядит следующим образом:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

И этого должно быть достаточно для создания базового меню со всеми функциями и стилями. Для более продвинутых и дополнительных функций вам необходимо включить дополнительный файл JS и CSS.

Создание Menu

Давайте создадим основное меню так, как вы обычно создаете его с помощью nav, ul, li а также a элементы. В этой демонстрации мы создадим горизонтальное меню с тремя подменю, а также три под-подменю, вот так.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

В приведенном выше меню мы включили навигацию с идентификатором меню, который будет использоваться в качестве ссылки на функцию jQuery.mmenu. Затем позвоните в plugin с javascript функцию и включите идентификатор так.

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

В теге LI вы можете увидеть класс с именем Selected, этот класс полезен для выбора меню по умолчанию при инициализации. Вы также можете добавить свой собственный класс (например, active), но не забудьте включить его в раздел конфигурации, например.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Этот плагин автоматически добавил ссылки для закрытия и открытия подменю, поэтому нам не нужно их создавать. Наше меню должно выглядеть так.

Вывод

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

jQuery.Mmenu также могут быть настроены для предварительного использования. Например, вы можете создать на своем сайте список контактов, похожий на мобильный, скомбинировав его расширение темы, надстройку (метки, счетчики, заголовок, перетаскивание, открытие и поле поиска) и позиционирование.

Если вы нашли статью Простое создание скользящего меню с помощью jQuery.mmenu полезно, поделитесь с друзьями. Увидимся в следующих постах. Следовать driveria.net чтобы получать последние обновления!