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

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

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

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

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

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

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

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

Установка:

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

Код

HTML

Код

<ul class="adinan_kusaga">
 <li>
 <a href="#">
 
 Главная
 </a>
 </li>
 <li>
 <a href="#">
 
 Дизайн
 </a>
 </li>
 <li>
 <a href="#">
 
 Шаблоны
 </a>
 </li>
 <li>
 <a href="#">
 
 Скрипты
 </a>
 </li>
 <li>
 <a href="#">
 
 </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, он написан здесь с меньшими затратами, ведь здесь не нужно не каких библиотек, а также скрипта, что идет на чистом стиле.

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

17 Июня 2020 Загрузок: 1 Просмотров: 1021 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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