• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Горизонтальные и адаптивные вкладки CSS (Красиво созданные вкладки при использование HTML И CSS)
Горизонтальные и адаптивные вкладки CSS
Kosten
Дата: Вторник, 2018-10-02, 23:11 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


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

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



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;
}
}


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

Демонстрация
Прикрепления: 4464547.png(16.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Горизонтальные и адаптивные вкладки CSS (Красиво созданные вкладки при использование HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: