» »

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


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

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

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

Код

<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.06.2016 Просмотров: 544 Комментарий: (12)

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

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

Комментарий: 12
Scheme
Scheme 13.06.2016 22:451
0
Красиво смотрится, но на темном фоне думаю лучше чем на светлом будет. Но просто пока не могу представить как можно ее в дизайн вписать.
Brung
Brung 13.06.2016 22:502
0
А чем так оно тебя напрягло, просто привыкли все, что навигацию должно из далека видеть, но можно и не меню сделать.
Kvint
Kvint 13.06.2016 23:003
0
Не чего лента стилей идет под такой скрипт, думаю что еще и адаптирован он, что не плохо бы было, то скриптов много, а вот с адаптацией как то не очень, хотя все равно потом весь сайт нужно делать под мобильные устройства. Даже уже на анализе сайтов, сделали приложение, идет он под мобильник или нет, не зря думаю.
tsakonter
tsakonter 13.06.2016 23:044
0
Все правильно, привыкли к одному, но сейчас столько оригинальный по своему сайтов, что как раз такой скрипт и на меню подойдет, может, кто то накрутит и что то другое сделает.
Сафрон
Сафрон 13.06.2016 23:125
0
Вообще красиво смотрится, мне что то напоминает на одном сайте, топ категорию, здесь думаю и цвета можно поменять как тебе нужно.
Angerfist
Angerfist 13.06.2016 23:236
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
Kosten 13.06.2016 23:277
0
По полному раскладу, но теперь только найти подходящий шаблон под меню.
Angerfist
Angerfist 13.06.2016 23:318
0
Это точно если оставить как есть, для PDA шаблонов кстати подходит, кому лень адаптировать, проверял работает на PDA
Tergran
Tergran 14.06.2016 21:179
0
Так это отлично, вот под темный хорошо по своим цветам подойдет, как то виднее будет этот скрипт дизайна заметить
trem200
trem200 20.08.2016 23:3010
0
Интересно выглядит
tsakonter
tsakonter 20.08.2016 23:5011
0
Под категорий бы его настроить, то нормально было, хотя и нак меню идет очень ярко.
trem200
trem200 20.08.2016 23:5112
0
Под категории было бы вообще шикарно
avatar