» »

Красивое "Анимированное меню" для uCoz

Красивое "Анимированное меню" для uCoz

Данное меню выглядит стильно, хотя кто-то скажет и нет, ну в любом случае кому-то да и понравиться, что тематически независимо. Меню как видно из название анимированное, в меню нет нечего лишнего. Меню поделено на под группы (не везде), личного фона у меню как такового нет, то есть фон зависит от вашего сайт. Шрифт использованный в меню, принадлежит Google то есть он бесплатный, не волнуйтесь шрифте имеет кириллицу.

Верхняя часть сайта:

Код
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">  
<div id="hornav">  
<ul class="menu" id="moomenu">  
<li class="item-677">  
<a href="http://zornet.ru/">скрипты для юкоз</a></li><li class="item-658">  
<a href="http://zornet.ru/">News</a></li><li class="item-629 deeper parent">  
<a href="http://zornet.ru/load/81">Media</a><ul><li class="item-633">  
  <a href="http://zornet.ru/news/">Screenshots</a></li><li class="item-668">  
  <a href="#">Concept art</a></li><li class="item-669">  
  <a href="#">Video</a></li></ul></li><li class="item-518 deeper parent">  
<a href="#">About</a><ul><li class="item-670">  
  <a href="#">Scorn</a></li><li class="item-671">  
  <a href="#">Ebb Software</a></li><li class="item-676">  
  <a href="#">FAQ</a></li></ul></li><li class="item-682">  
<a href="#">Wiki</a></li><li class="item-681">  
<a href="#">PRESSKIT</a></li><li class="item-647">  
<a href="#">Contact</a></li></ul>  
</div>


Css:

Код
#hornav {  
  font-family: 'Oswald', sans-serif;  
  border:1px solid transparent;  
  clear: both;  
  height: 45px;  
  top: -1px;  
  z-index: 2000;  
}  

#hornav > ul {  
  padding: 0;  
  margin:8px 0px 0px 0px;  
  text-align: center;  
}  

#hornav > ul > li a{  
  padding: 24px 14px;  
  margin: 0;  
  list-style: none outside none;  
  line-height: 1.8em;  
  letter-spacing: 0.5px;  
  font-weight: 300;  
  font-size: 16px;  
  text-transform: uppercase;  
  text-decoration: none;  
  cursor: pointer;  
}  

#hornav > ul > li > a:hover, #hornav > ul > li > a:focus, #hornav > ul > li > a:active{  
  text-decoration: none;  
}  

#hornav ul li {  
  display: inline-block;  
  position: relative;  
}  

#hornav ul li ul {  
}  

#hornav ul ul {  
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);  
  display: block;  
  list-style: none;  
  margin-top: -5px;  
  padding: 5px 0 !important;  
  min-width: 260px;  
  z-index: 1000;  
}  

#hornav ul ul li {  
  min-height: 22px;  
  text-align: left; /*required to position li's when menu centered */  
  width: 100%; /*required to position li's when menu centered */  
}  

#hornav ul ul li a {  
  display: block;  
  padding: 10px 15px;  
  text-transform: capitalize;  
  font-size: 14px;  
  border: none !important;  
  border-radius: 0px !important;  
  margin-left: 0px !important;  

}  

#hornav ul ul li a:active,  
#hornav ul ul li a:focus,  
#hornav ul ul li a:hover {  
  text-decoration: none;  
  border: none !important;  
  border-radius: 0px !important;  
  margin-left: 0px !important;  

}  

#hornav ul ul li:first-child {  
  border-top: none;  
}  

#hornav ul ul li:hover a {  
  text-decoration: none;  
}  

#hornav ul ul ul:before {  
  display: none;  
}  

#hornav ul ul:before {  
  background: transparent url('http://zornet.ru/Aben/Aben-Abag/16469106.png') no-repeat 0 0;  
  content: "";  
  display: block;  
  height: 10px;  
  left: 26px;  
  position: absolute;  
  top: -10px;  
  width: 14px;  
}  

#hornav li ul,  
#hornav li ul li ul {  
  position: absolute;  
  height: auto;  
  min-width: 260px;  
  opacity: 0.8;  
  visibility: hidden;  
  transition: all 300ms linear;  
  -o-transition: all 300ms linear;  
  -ms-transition: all 300ms linear;  
  -moz-transition: all 300ms linear;  
  -webkit-transition: all 300ms linear;  
  top: 92px;  
  z-index: 4000;  
}  

#hornav li:hover > ul,  
#hornav li ul li:hover > ul {  
  display: block;  
  opacity: 0.8;  
  visibility: visible;  
  top: 48px;  
}  

#hornav li:hover > ul,  
#hornav li ul li:hover > ul {  
  -webkit-transition: opacity 300ms linear;  
}  

#hornav li ul li ul {  
  left: 230px;  
  top: 0;  
}  

#hornav li ul li:hover > ul {  
  top: 0px;  
  left: 260px;  
}

(rip Бармен) - он же JoniDen.
15.03.2017 Просмотров: 423 Комментарий: (42)

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

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

Комментарий: 42
Kolinkor
Kolinkor 15.03.2017 15:201
0
Здесь демонстрацию бы не плохо увидеть!
Марковичь
Марковичь 15.03.2017 15:452
0
Для чего вообще требуют демонстрацию, но это не шаблон и можно 5 минут затратить и поставить.
Марковичь
Марковичь 15.03.2017 15:463
0
Это говорю про меню, есть другие скрипты, где можно посмотреть, но не как навигация, всегда идет код и стили и больше не чего не нужно.
Kosten
Kosten 15.03.2017 15:584
0
Проверил на сайте jsfiddle.net, что то у меня такая картина, возможно на самом ресурсе нужно проверять.

JoniDen
JoniDen 15.03.2017 17:075
0
Если ты имеешь виду, почему под Media написано Contact. Просто на том сайте разделено все: HTML, CSS, JS, и раздел просмотра скрипта. В середине есть полоска, двинь её влево и меню будет норм отображаться.
avatar
kldou24 15.03.2017 18:146
0
Моё мнение - надо выкладывать адаптированный материал...
Kolinkor
Kolinkor 15.03.2017 18:187
0
Уже пора адаптированный материал заливать. Но его все же давайте согласимся не очень много.
avatar
kldou24 15.03.2017 19:3910
0
Спам убрал, так как с темой не имеет не чего общего. вот например
JoniDen
JoniDen 15.03.2017 18:248
+1
Не нравиться не пользуйся. Это не шаблон, чтобы делать адаптацию.
Kolinkor
Kolinkor 15.03.2017 18:569
0
У меня так получилось, что можно сделать как тебе нужно, хотя не понял, поставлю лучше на сайт и там точно видно будет.

avatar
bair 07.08.2017 19:5311
0
Практически единственное меню которое встало нормально. Только один вопрос: как прозрачность уменьшить у фона подменю? А то что то пробовал всяко но не получается изменить (((
Kosten
Kosten 07.08.2017 20:3512
0
Ссылку скиньте на сайт где навигация установлена.
avatar
bair 07.08.2017 21:3713
0
uu-test.ucoz.org
Kosten
Kosten 07.08.2017 21:4114
0
А где у вас там под меню, что то не нашел его.
avatar
bair 07.08.2017 21:5215
0
"О школе" - наводим выход подменю
Гордость школы
Достижения школы
avatar
bair 07.08.2017 21:5316
0
Подложка и текст подменю просвечивает и сложно читать разделы подменю
Kosten
Kosten 07.08.2017 22:0017
0
Посмотрел с разных браузеров, но реально не чего не вижу.
avatar
bair 07.08.2017 22:0018
0
хм, посмотрю завтра с другого компа
1 2 3 »
avatar