Горизонтальное меню сайта с эффектами CSS

рейтинг 1.0 из 5
Здесь представлено горизонтальное меню в три оттенка цвета, что созданы на HTML и CSS3. Смотрятся современно и подойдут на многие сайты. Отлично впишутся на светлый фон, так как изначально для него навигация была создана, где имеет небольшую тень, которая органически вписывается в основной дизайн. Если установка происходит на темном фоне, то просто теней видно не будет, но само основа безусловно намного ярче смотрится. Раз идет 3 горизонтальной навигаций, что у каждой есть свой оригинальный эффект, который появится при наведении на раздел. 



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



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



Так по умолчанию идет: 



Горизонтальное меню для сайта 



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



HTML 

Код
<nav id="kitesanulan-1">

  <a class="wakilastumib-1" href="#">CSSAVE</a>

  <a class="wakilastumib-1" href="#">Скрипты</a>

  <a class="wakilastumib-1" href="#">Шаблоны</a>

  <a class="wakilastumib-1" href="#">Дизайн</a>

</nav>



<nav id="kitesanulan-2">

  <a class="wakilastumib-2" href="#">CSSAVE</a>

  <a class="wakilastumib-2" href="#">Скрипты</a>

  <a class="wakilastumib-2" href="#">Шаблоны</a>

  <a class="wakilastumib-2" href="#">Дизайн</a>

</nav>



<nav id="kitesanulan-3">

  <a class="wakilastumib-3" href="#">CSSAVE</a>

  <a class="wakilastumib-3" href="#">Скрипты</a>

  <a class="wakilastumib-3" href="#">Шаблоны</a>

  <a class="wakilastumib-3" href="#">Дизайн</a>

</nav>

CSS 

Код
nav { 

  margin-top: 40px; 

  padding: 24px; 

  text-align: center; 

  font-family: Raleway; 

  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 



#kitesanulan-1 { 

  background: #358e5b; 



#kitesanulan-2 { 

  background: #2f4779; 



#kitesanulan-3 { 

  background: #bb830a; 





.wakilastumib-1 { 

  transition: 0.3s ease; 

  background: #358e5b; 

  color: #eaeaea; 

  font-size: 20px; 

  text-decoration: none; 

  border-top: 4px solid #35905c; 

  border-bottom: 4px solid #36965f; 

  padding: 20px 0; 

  margin: 0 20px; 



.wakilastumib-1:hover { 

  border-top: 4px solid #f7f4ef; 

  border-bottom: 4px solid #f7f5f3; 

  padding: 6px 0;  





.wakilastumib-2 { 

  transition: 0.6s; 

  color: #fbf5f5; 

  font-size: 19px; 

  text-decoration: none; 

  border-right: 2px dotted transparent; 

  padding: 29px 7px 0 9px; 

  margin: 0 10px; 



.wakilastumib-2:hover { 

  border-right: 2px dotted #f5f1f1; 

  padding-bottom: 24px; 



.wakilastumib-3 { 

  transition: 0.4s; 

  color: #f1eeee; 

  font-size: 19px; 

  text-decoration: none; 

  padding: 0 9px; 

  margin: 0 9px; 



.wakilastumib-3:hover { 

  background-color: #fdfafa; 

  color: #a2720c; 

  padding: 23px 9px; 

}


Также можете изначально посмотреть и определится по эффектам, что представлены. 
  • Дата: 05.05.2018, 14:40
  • Просмотры: 63
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий