Это вкладки, которые больше похоже на горизонтальное меню и содержать один запрос. Где при открытие одна вкладка будет отличатся от других по высоте. Что означает, вы находитесь на этой теме. Их можно применять как на главной сайта, также можно задействовать на отдельной страницы. Так как они полностью адаптивные, что корректно отображаются на всех мобильных аппаратах.
Безусловно одна из важных задач дизайнера пользовательского интерфейса, это навигация по сайту, которая должна быть проста и удобна для пользователя. Где может быть много способов, чтоб сделать это возможным, чем через навигационные вкладки.
HTML
Код
<nav id="detusen-mignoave">
<a href="#">Главная</a>
<a href="#">Zornet.Ru</a>
<a href="#" id="korealized">Стили</a>
<a href="#">SEO</a>
</nav>
CSS
Код
nav#detusen-mignoave {
padding-top: 2rem;
padding-left: 2rem;
overflow: hidden;
height: 4rem;
width: max-content;
margin: 0 auto;
}
nav#detusen-mignoave a {
font-family: Avenir, Helvetica, sans-serif;
display: inline-block;
text-transform: uppercase;
text-decoration: none;
color: #f5f3f3;
padding: 0.9rem 2.7rem 2rem 2.7rem;
border: 1px solid #b9b9b9;
border-radius: 3px 3px 0 0;
background: linear-gradient(#80a5da, #1e2a35);
box-shadow: 0 0 15px rgba(0,0,0,0.5);
letter-spacing: 0.15rem;
text-shadow: 0 1px 0 #211f1f;
font-size: 1.2rem;
transition: 0.2s -webkit-transform linear;
transition: 0.2s transform linear;
transition: 0.2s transform linear, 0.2s -webkit-transform linear;
}
nav#detusen-mignoave a:nth-child(n+1) {
margin-left: -1.2rem;
position: relative;
z-index: 2;
}
a#korealized {
position: relative;
top: -0.2rem;
z-index: 2;
}
nav#detusen-mignoave a:hover, nav#detusen-mignoave a:focus {
transform: translateY(-.4rem);
}
@media screen and (max-width: 800px) {
nav#detusen-mignoave { height: 3rem;
}
nav#tab-navigation a {
font-size: 1.1rem;
padding: 0.8rem 1.4rem 2rem;
}
}
@media screen and (max-width: 500px) { nav#detusen-mignoave { height: auto; }
nav#detusen-mignoave a {
display: block;
margin-top: -1rem;
}
}
Прекрасно продуманные навигационные вкладки не только помогают пользователям узнавать как можно больше информации, но также играет большую роль в поиске на сайте.
Демонстрация
