• pda
  • 26.05.2018

  • 14:37

  • 107

  • 1

Горизонтальное меню сайта Vtgas при помощи CSS

  • Разработчик:

    pda
1.0

Проголосовало

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

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

1. Разделитель должен иметь ту же высоту, что и текст. 
2. Текст в ссылке должен иметь подчеркивание, применяемое при наведении, но между текстом и подчеркиванием должно быть. 
3. Эффекты Hover применяются только к отдельным ссылкам. 
4. Весь блок ссылок должен быть доступен клику, а эффект наведения должен начинаться, когда курсор входит в поле ссылки. 
5. Активное состояние каждой ссылки должно быть таким же, как при зависании ссылки. 

Приступаем к установке: 

HTML 

Код
<ul class="criptyocan_customizanyp"> 

  <li><a href="#">Главная</a></li> 

  <li><a href="#">СSSAVE.AT.UA</a></li> 

  <li><a href="#">Скрипты</a> 

  <ul> 

  <li><a href="#">Коды</a></li> 

  <li><a href="#">Файлы</a></li> 

  <li><a href="#">Архивы</a></li> 

  <li><a href="#">Логотип</a></li>  

  </ul>  

  </li> 

  <li><a href="#">Шаблоны</a></li> 

  <li><a href="#">Дизайн</a></li>  

  </ul>

CSS 
Код
.criptyocan_customizanyp{ 

  height: 49.8px; 

  padding: 0; 

  margin: 0; 

  position: absolute; 





.criptyocan_customizanyp li { 

  height: auto; 

  width: 147px; 

  float: left; 

  text-align: center; 

  list-style: none; 

  font: 14px "Bonveno", "Century Gothic"; 

  padding: 0; 

  margin: 0; 

  background-color: #f1ebeb; 

  border: 1px solid #afaaaa; 

  box-shadow: 0 1px 0 rgba(243, 234, 234, 0.75) inset, 0 1px 3px rgba(14, 14, 14, 0.15); 

  border-radius: 3px; 

  margin-left: 10px; 





.criptyocan_customizanyp a { 

  padding: 13px; 

  text-decoration: none; 

  color: #4e4b4b; 

  text-shadow: 0 1px #f1e8e8; 

  display: block; 

  font-weight: bold; 



.criptyocan_customizanyp li ul{ 

  display: none; 

  height: auto;  

  margin-left: -11px; 

  padding: 0;  

}  



.criptyocan_customizanyp li:hover ul{ 

  display: block; 





.navbar li ul li { 

  background-color:#eee; 

  border: 1px solid #ccc; 

}  



.criptyocan_customizanyp li:hover, a:hover { 

  background: #e8e8e8; 

}  

На этом установка завершена. 
Порядок установки:
Ссылка
BB-Code
HTML-код
Аватар pda
pda
pda
0
Стоит попробовать установить на своем сайте!
Спам
26.05.2018, 14:50
:)