ZorNet.Ru — сайт для вебмастера » Меню для сайта » Эффект круговой навигации на чистом CSS

Эффект круговой навигации на чистом CSS

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

Где по умолчанию мы наблюдаем значок, но с вытягиванием он заменяется ключевым словом, что безусловно удобно для многих. В предыдущей статье мы поделились несколькими интересными навигациями css3, поэтому давайте представим одну из них, как реализована круговая навигация. Закрепленные за материалам стилистика отлично редактируется, где добавил теней и сделал вид более яркий, что идет по умолчанию на demo странице.

При открытии страницы:

Круговая навигация на CSS

При наведении курсора:

Красивый эффект CSS анимации меню сайта

Установка:

Шрифтовые знаки

Код
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

HTML

Код
<ul class="adinan_kusaga">
  <li>
  <a href="#">
  <span class="icon icon-file"></span>
  <span class="text">Главная</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon icon-folder-open"></span>
  <span class="text">Дизайн</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon icon-code"></span>
  <span class="text">Шаблоны</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon icon-beaker"></span>
  <span class="text">Скрипты</span>
  </a>
  </li>
  <li>
  <a href="#">
  <span class="icon icon-home"></span>
  </a>
  </li>
</ul>

CSS

Код
ul.adinan_kusaga {
  margin-left: 50px;
  display: inline-block;
  list-style: none;
}
ul.adinan_kusaga li {
  float: right;
  padding: 5px;
  background-color: #59a386;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  margin-left: -50px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  margin-top: 3px;
}
ul.adinan_kusaga li a {
  overflow: hidden;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
  height: 50px;
  color: #3c5f51;
  background-color: #9ad0bb;
  text-align: center;
  min-width: 50px;
  display: block;
  line-height: 50px;
  padding-left: 63px;
  padding-right: 48px;
  width: 50px;
  border: 2px solid #c5ffe6;
  box-shadow: 0px 0px 3px 2px rgba(84, 81, 81, 0.83), 0px 0px 0px 0px rgba(140, 140, 140, 0.46);
}
ul.adinan_kusaga li a .icon {
  display: inline-block;
}
ul.adinan_kusaga li a .text {
  display: none;
  opacity: 0;
}
ul.adinan_kusaga li a:hover {
  width: 205px;
  background-color: #a3fbd9;
}
ul.adinan_kusaga li a:hover .text {
  display: inline-block;
  opacity: 1;
}
ul.adinan_kusaga li:last-child a {
  padding: 0;
}
ul.adinan_kusaga li:last-child:hover {
  padding: 3px;
  margin-top: 0;
}
ul.adinan_kusaga li:last-child:hover a {
  width: 60px;
  height: 60px;
  line-height: 60px;
}

Поскольку он включает в себя больше атрибутов css3, он написан здесь с меньшими затратами, ведь здесь не нужно не каких библиотек, а также скрипта, что идет на чистом стиле.

Демонстрация
2020-06-17 Загрузок: 1 Просмотров: 271 Комментарий: (0)

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

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

Оставь свой отзыв

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