Вы ищете вдохновляющие эффекты и идеи взаимодействия для вашего сайта, где будет горизонтальная панель в виде блоков. Где при открытии страницы мы видим небольшие блоки, которые выстроенные в горизонтальную линию, и по вверх их расположены шрифтовые кнопки, что соответствует тематики. При наведение блок раскрывается и уже наблюдаем ключевое слово, где по клику можно переходить на материал или категорию.
Это отличный способ справиться с адаптивным меню. Где при помощи стилистики вы получите оригинальное блочное меню, в котором элементы складываются в выпадающий список при переполнении. Мало того, но кнопка стиля гамбургера со счетом значка появляется, когда есть скрытые пункты, чтобы показать.
Где при сжатии или просмотра на мобильном аппарате, эти блоки автоматически становятся в горизонтальное меню. Это безусловно создано для современного дизайна, но также считаю, что можно поставить такую навигацию на отдельную страницу.
Так наблюдаем на большом экране:
Здесь вид идет с мобильного гаджет:
Установка:
Подключаем шрифтовые кнопки
Код
<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;
}
Так как гибкие элементы сжимаются и оборачиваются в другой горизонтальный элемент по мере необходимости. Это меню показывает, насколько легко комбинировать все удивительные функции с анимацией для действительно замечательной навигации.
Демонстрация
