• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Навигация сайта с CSS-эффектом для блоков (Горизонтальная навигационная панель с эффектом наведения CSS)
Навигация сайта с CSS-эффектом для блоков
Kosten
Дата: Суббота, 2020-04-11, 06:36 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26255
Награды: 61


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

Это отличный способ справиться с адаптивным меню. Где при помощи стилистики вы получите оригинальное блочное меню, в котором элементы складываются в выпадающий список при переполнении. Мало того, но кнопка стиля гамбургера со счетом значка появляется, когда есть скрытые пункты, чтобы показать.

Где при сжатии или просмотра на мобильном аппарате, эти блоки автоматически становятся в горизонтальное меню. Это безусловно создано для современного дизайна, но также считаю, что можно поставить такую навигацию на отдельную страницу.

Так наблюдаем на большом экране:



Здесь вид идет с мобильного гаджет:



Установка:

Подключаем шрифтовые кнопки

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
   <nav>
      <ul>
         <li>
         <span>
         <i class="fa fa-home" aria-hidden="true"></i>
            </span>
            <span><a href="">Home</a></span>
            
            </li>
           <li>
         <span>
         <i class="fa fa-newspaper-o" aria-hidden="true"></i>
            </span>
            <span><a href="">News</a></span>
            
            </li>
           <li>
         <span>
         <i class="fa fa-cogs" aria-hidden="true"></i>
            </span>
            <span><a href="">Services</a></span>
            
            </li>
           <li>
         <span>
         <i class="fa fa-phone" aria-hidden="true"></i>
            </span>
            <span><a href="">Contact</a></span>
            
            </li>
           <li>
         <span>
         <i class="fa fa-info" aria-hidden="true"></i>
            </span>
            <span><a href="">About</a></span>
            
            </li>
         </ul>

CSS

Код
nav{
   Width:100vw;
}
ul{
   padding:0;
   display:flex;
   justify-content:space-around;
   align-items:center;
}
li{
   list-style-type:none;
   height:85px;
   width:120px;
   overflow:hidden;
}
li>span{
   display:flex;
   height:100%;
   width:100%;
   justify-content:center;
   align-items:center;
   transition:0.5s;
}
li>span:nth-child(1){
   color:#1abc9c;
   background-color:rgba(255,255,255,0.05);
   font-size:32px;
}
li>span:nth-child(2){
   background-color:#1abc9c;
}
li:hover span{
   transform:translateY(-100%);
}
a{
   color:#fff;
   text-decoration:none;
   font-family:'poppins',sans-serif;
   font-size:18px;
}

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

Демонстрация
Прикрепления: 4538435.png(14.7 Kb) · 8385354.png(4.4 Kb) · cool-hover-effe.zip(3.1 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2020-04-11, 06:39 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26255
Награды: 61


Красивые навигационные эффекты при наведении


See the Pen
Beautiful navigation hover effects
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Навигация сайта с CSS-эффектом для блоков (Горизонтальная навигационная панель с эффектом наведения CSS)
  • Страница 1 из 1
  • 1
Поиск: