MuSimka.SiTe - Меню для сайта - Адаптивный дизайн меню CSS для сайта
Шаблоны

1 Светло синий шаблон форума для uCoz
Дата добавления:23.06.2022

2 Шаблон Cinemak для uCoz
Дата добавления:21.06.2022

3 Шаблон NowFilms для uCoz
Дата добавления:21.06.2022

4 Шаблон Animeway для uCoz
Дата добавления:21.06.2022

5 Шаблон «7ucoz» для uCoz
Дата добавления:19.06.2022
Комментарии
  • 12.06.2022
    Перейти

    Прикольно смотрится на сайте))))))))

  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0














     


    Темное по цветовой палитре цвета адаптивная панель меню навигации, которое использует CSS Flexbox, что корректно смотрится на разных экранах. Ранее уже не одну такую схожую отзывчивую навигацию размещал на сайте, где аналогично задействовали HTML и CSS. Да и вообще, считаю горизонтальное меню одним из главных на странице сайта. Ведь в нем мы основном прописываем самые основные ссылки для перехода на данную информацию. Но мы делаем так, что с любого аппарата можно произвести данные функции, что эта навигация полностью соответствует всем данным.



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



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

     

    Отзывчивое горизонтальное меню HTML + CSS




    Рассмотрим изображение, где по умолчанию с большого монитора:



    Адаптивный веб-дизайн CSS навигации сайта



    Переходим на гаджет с небольшим экраном:



    Отзывчивый дизайн CSS навигации сайта



    И здесь мы видим уже не подчеркивание, а графику, которая заключает по всем сторонам ключевые слова. Что для темного формата смотрится просто прекрасно.



    Отзывчивое меню на CSS



    Установка:



    Подключаем библиотеку и шрифтовые знаки:


     



     



    Код
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script></p>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <p>



     



    HTML



     



    Код
    </p>

    <nav>
    <ul>
      <li class="sekoune">ZORNET.RU</li>
      <li class="keponsive"><a href="#">Главная</a></li>
      <li class="keponsive"><a href="#">Скрипты</a></li>
      <li class="keponsive"><a href="#">Форум</a></li>
      <li class="keponsive"><a href="#">Статьи</a></li>
      <li class="keponsive"><a href="#">Контакты</a></li>
      <li class="btn"> </li>
    </ul>
    </nav>

    <p>



    CSS



    Код
    nav { background: #1c1b1b; padding: 6px 36px; } nav ul{ list-style: none; display: flex; flex-wrap: wrap; align-keponsive: center; justify-content: center; } nav ul li{ padding: 15px 0; cursor: pointer; } nav ul li.keponsive{ position: relative; width: auto; margin: 0 16px; text-align: center; order: 3; } nav ul li.keponsive:after{ position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #10b9b9; opacity: 0; transition: all 0.2s linear; } nav ul li.keponsive:hover:after{ opacity: 1; bottom: 8px; } nav ul li.sekoune { flex: 1; color: #f1eded; font-size: 24px; font-weight: 600; cursor: default; user-select: none; } nav ul li a{ color: white; font-size: 18px; text-decoration: none; transition: .4s; } nav ul li:hover a{ color: cyan; } nav ul li i{ font-size: 23px; } nav ul li.btn{ display: none; } nav ul li.btn.hide i:before{ content: '\f00d'; } @media all and (max-width: 900px){ nav{ padding: 5px 30px; } nav ul li.keponsive{ width: 100%; display: none; } nav ul li.keponsive.show{ display: block; } nav ul li.btn{ display: block; } nav ul li.keponsive:hover{ border-radius: 5px; box-shadow: inset 0 0 5px #26dddd, inset 0 0 10px #6aebeb; } nav ul li.keponsive:hover:after{ opacity: 0; } }
    JS
    Код
    $(document).ready(function(){ $('.btn').click(function(){ $('.keponsive').toggleClass("show"); $('ul li').toggleClass("hide"); }); });



     



     



    Здесь хочу подчеркнуть, при небольших базовых знаний HTML и CSS, вы можете вывести эту панель навигации на совершенно новый уровень в плане стилистике, так как функционал не рекомендую трогать, ведь он по умолчанию настроен на отзывчивую панель.


    • Категория: Меню для сайта
    • Просмотров: 17
    • Загрузок: 0

    Поделиться файлом или скачать

    Коментарии

    • Коментарии к материалу Адаптивный дизайн меню CSS для сайта
    avatar
    MuSimka.SITE

    MuSimka.SITE ©2022


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