Плюшкидля сайта
Главная » Статьи » Меню
Меню - Горизонтальное/Вертикальное
Меню это навигационный блок на сайте, который позволяет пользователю быстро перемещаться между разделами и страницами сайта. Оно является важным элементом дизайна и функциональности сайта, так как помогает пользователю ориентироваться в структуре сайта и находить нужную информацию.
Примеры

Горизонтально:

Вертикально:

  • Подсветка открытого раздела по урл.
  • Авто определение меню горизонтально или вертикально.
  • Для светлого и тёмного сайта.

Подключение к сайту:


 <!-- Добавить в <head>..</head>: -->
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500..700&display=swap" rel="stylesheet"><!-- Шрифт -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script><!-- Библиотека jQuery -->
 <link href="https://zam.usite.pro/db/publ/zMenu/1-0-0/m.css" rel="stylesheet"><!-- Вид `Меню` -->
 <script src="https://zam.usite.pro/db/publ/zMenu/1-0-0/m.js" defer></script><!-- Мозг `Меню` -->
► Исходники(css, js): github (m. - Сокращённый вариант, ok. - Подробный) 

 <!-- Добавить в <body>..</body>: -->
 <header class="zMenu">
   <div class="zMenu2">
     <div class="zMenuF">
       <div class="zMenuL"><a href="/" title="Главная">Лого</a></div>
       <div>
         <nav>
           <div><!-- Список меню: -->
             <a href="/" data-zurl="/glavnaja/">Главная</a>
             <a href="/publ/">Каталог</a>
             <a href="/gl/">Новости</a>
             <a href="?r=file">Файлы</a>
           </div>
         </nav>
       </div>
       <div class="zMenuB">
         <!-- Тут можно добавить свои button icon -->
         <button class="B-I-src"><p><s></s></p></button>
         <button class="B-Ix-M B-L" disabled><p><s></s><s></s></p></button>
       </div>
     </div>
   </div>
 </header>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     zMenu.$();//★ Запускаем Меню
   });
 </script>
Для тёмного дизайна сайта, необходимо добавить class="temaT" 

 <!-- Необходимо добавить в body class="temaT" -->
 <body class="temaT">
Категория: Меню | Добавил: zam (22.05.2024)
Просмотров: 89 | Теги: HTML, JavaScript, jQuery, JS, меню, css | Рейтинг: 0.0/0
Всего комментариев: 0
Войдите:
avatar