ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню анимированное для сайта

Вертикальное меню анимированное для сайта

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

Основное преимущество данного меню в том, что оно достаточно легкое в размере, с ним легко работать.

Первый вариант:

Код

<div class = "container" style = "">
<ul class = "nice-menu">
<li class = "orange"><a href = "">Главная страница</a></li>
<li class = "red"><a href = "">Каталог файлов</a></li>
<li class = "green"><a href = "">Каталог статей</a></li>
<li class = "blue"><a href = "">Онлайн видео</a></li>
<li class = "bright"><a href = "">Онлайн игры</a></li>
<li class = "red"><a href = "">Гостевая книга</a></li>
</ul>
</div>

Второй вариант:

Код

<div class = "container" style = "">
<ul class = "nice-menu bounce">
<li class = "orange"><a href = "">Главная страница</a></li>
<li class = "red"><a href = "">Каталог файлов</a></li>
<li class = "green"><a href = "">Каталог статей</a></li>
<li class = "blue"><a href = "">Онлайн видео</a></li>
<li class = "bright"><a href = "">Онлайн игры</a></li>
<li class = "red"><a href = "">Гостевая книга</a></li>
</ul>
</div>

Общие стили для обоих вариантов:

Код

ul.nice-menu {
  list-style: none;
  margin-top: 30px;
  width: 300px;
}

@-moz-keyframes expand {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-moz-keyframes expand-bounce {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  50% {
  width: 200px;
  }

  70% {
  width: 170px;
  }

  80% {
  width: 200px;
  }

  90% {
  width: 190px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-webkit-keyframes expand {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-webkit-keyframes expand-bounce {
  0% {
  width: 5px;
  padding-left: 0px;
  }

  50% {
  width: 200px;
  }

  70% {
  width: 170px;
  }

  80% {
  width: 200px;
  }

  90% {
  width: 190px;
  }

  100% {
  width: 200px;
  padding-left: 20px;
  }
}

@-moz-keyframes shrink {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-moz-keyframes shrink-bounce {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  50% {
  width: 5px;
  }

  70% {
  width: 35px;
  }

  80% {
  width: 5px;
  }

  90% {
  width: 15px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-webkit-keyframes shrink {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

@-webkit-keyframes shrink-bounce {

  0% {
  width: 200px;
  padding-left: 20px;
  }

  50% {
  width: 5px;
  }

  70% {
  width: 35px;
  }

  80% {
  width: 5px;
  }

  90% {
  width: 15px;
  }

  100% {
  width: 5px;
  padding-left: 0px;
  }
}

ul.nice-menu li {
  width: 5px;
  height: 30px;
  line-height: 20px;
  padding: 0px 0px 0px 0px;
  margin-top: 3px;
  background: transparent;
  width: 5px;
}

ul.nice-menu.tight li {
  margin-top: 0 !important;
}

ul.nice-menu li {
  -moz-animation-name: shrink;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li {
  -moz-animation-name: shrink-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu li:hover {
  width: 200px;
  padding-left: 20px;
  -moz-animation-name: expand;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li:hover {
  -moz-animation-name: expand-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu a {
  width: 200px;
  text-decoration: none;
  font-size: 14px;
  color: #FFF;
  text-shadow: 0px 0px 3px #333;
  font-weight: bold;
  position: absolute;
  padding: 5px 0px;
  padding-left: 20px;
}

ul.nice-menu li.green {
  background: rgb(107,186,112);
}

ul.nice-menu li.blue {
  background: rgb(78,92,127);
}

ul.nice-menu li.orange {
  background: rgb(216,121,40);
}

ul.nice-menu li.dark {
  background: rgb(42,32,30);
}

ul.nice-menu li.red {
  background: rgb(178,59,30);
}

ul.nice-menu li.bright {
  background: rgb(241,249,210);
}

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

Author: Marcell Jusztin - http://www.marcelljusztin.com

13 Июня 2016 Просмотров: 2086 Комментариев: (12)

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

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

Angerfist

Похожие материалы

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

Комментарии: 12
Порядок вывода комментариев: Scheme 13 Июня 2016 22:45¹ 0 Красиво смотрится, но на темном фоне думаю лучше чем на светлом будет. Но просто пока не могу представить как можно ее в дизайн вписать. Kolinkor 13 Июня 2016 22:50² 0 А чем так оно тебя напрягло, просто привыкли все, что навигацию должно из далека видеть, но можно и не меню сделать. Kvint 13 Июня 2016 23:00³ 0 Не чего лента стилей идет под такой скрипт, думаю что еще и адаптирован он, что не плохо бы было, то скриптов много, а вот с адаптацией как то не очень, хотя все равно потом весь сайт нужно делать под мобильные устройства. Даже уже на анализе сайтов, сделали приложение, идет он под мобильник или нет, не зря думаю. tsakonter 13 Июня 2016 23:04⁴ 0 Все правильно, привыкли к одному, но сейчас столько оригинальный по своему сайтов, что как раз такой скрипт и на меню подойдет, может, кто то накрутит и что то другое сделает. Сафрон 13 Июня 2016 23:12⁵ 0 Вообще красиво смотрится, мне что то напоминает на одном сайте, топ категорию, здесь думаю и цвета можно поменять как тебе нужно. Angerfist 13 Июня 2016 23:23⁶ 0 Цвета конечно можно менять и добавлять свои, внизу в конце стилей можно свои добавить к примеру: Код ul.nice-menu li.bright { background: rgb(241,249,210); и снизу дописываем и добавляем например чёрный цвет,по английски black,дальше смотрим в таблице RGBA что это 0,0,0 и получаем: Код ul.nice-menu li.black { background: rgb(0,0,0); и в самом меню можно всё заменить на один цвет: Код <li class = "black"><a href = "">Главная страница</a></li> <li class = "black"><a href = "">Каталог файлов</a></li> <li class = "black"><a href = "">Каталог статей</a></li> а ширину меню по поводу адаптивности просто вместо фиксированных 300px влепить 100% Kosten 13 Июня 2016 23:27⁷ 0 По полному раскладу, но теперь только найти подходящий шаблон под меню. Angerfist 13 Июня 2016 23:31⁸ 0 Это точно если оставить как есть, для PDA шаблонов кстати подходит, кому лень адаптировать, проверял работает на PDA Tergran 14 Июня 2016 21:17⁹ 0 Так это отлично, вот под темный хорошо по своим цветам подойдет, как то виднее будет этот скрипт дизайна заметить trem200 20 Августа 2016 23:30¹⁰ 0 Интересно выглядит tsakonter 20 Августа 2016 23:50¹¹ 0 Под категорий бы его настроить, то нормально было, хотя и нак меню идет очень ярко. trem200 20 Августа 2016 23:51¹² 0 Под категории было бы вообще шикарно