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

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

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

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

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

<!-- Добавить в <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)
Просмотров: 88 | Теги: HTML, JavaScript, jQuery, JS, меню, css | Рейтинг: 0.0/0
Всего комментариев: 0
avatar