ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальное меню с красивым эффектом CSS

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

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

Поскольку меню является одной из наиболее доступных областей сайта, разработчики часто создают меню, которые эстетически и визуально приятны, что думаю это не исключение, так как полностью создана на стилях CSS. Простые ссылки просто не сокращают его, особенно если вы создаете веб-сайт по своему интересу или тематическому направлению. Эта навигация профессионально создано, используя только HTML и CSS. Где вы можете его выставить на любую палитру под свой дизайн сайта.

HTML

Код

<ul class="zornet_ru_kersan">
  <li>
  <h2>ZORNET.RU</h2>
  <p>ZorNet: Создание сайта</p>
  </li>
  <li>
  <h2>Скрипты uCoz</h2>
  <p>Категория скрипты</p>
  </li>
  <li>
  <h2>Шаблоны uCoz</h2>
  <p>В категорий шаблоны</p>
  </li>
  <li>
  <h2>Все по HTML</h2>
  <p>Раздел для вебмастера</p>
  </li>
</ul>

CSS

Код

.zornet_ru_kersan {
  margin: 185px 15px;
  background: #fbeded;
  overflow: hidden;
  width: 743px;
  box-shadow: 0 2.7px 9.5px 3px rgba(23, 22, 22, 0.32);
}

.zornet_ru_kersan li {
  width: 118px;
  border-left: 3px solid #243a69;
  float: left;
  cursor: pointer;
  list-style-type: none;
  padding: 9.7px 49px 9.7px 14.7px;
  -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.64, 1);
}

.zornet_ru_kersan li h2 {
  font-family: georgia;
  font-weight: normal;
  font-style: italic;
  font-size: 13px;
  margin-bottom: 4px;
  line-height: 15px;
}

.zornet_ru_kersan li p{
  font-size: 11px;
  color: #999;

  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
}

.zornet_ru_kersan li:hover {
  background: #292727;
  border-left: 4px solid #242635;
}

.zornet_ru_kersan li:hover h2 {
  font-weight: bold;
  color: #fff;
}

.zornet_ru_kersan li:hover p {
  color: #ccc;
  padding-left: 5px;
}
* {margin: 0; padding: 0;}

Для каждого элемента списка вы можете как добавить или убрать элемент под созданную ссылку.

Демонстрация:

20 Января 2018 Просмотров: 1596 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0