» »

Горизонтальное меню AgRusta для uCoz


Горизонтальное меню AgRusta для uCoz

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

Так смотрится на темном фоне.

Горизонтальное меню


Установка:

Ставим код, так где хотите видеть меню, но основном это вверх сайта в самый низ.

Код
<div id="container">  
<ul id="menu">  
  <li><a href="#">О нас</a>  
  <ul>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Скрипты uCoz</a>  
  <ul>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  </ul>  
  </li>  
  <li><a href="#">ZorNet.Ru</a>  
  <ul>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  </ul>  
  </li>  
  <li><a href="#">ZorNet.Ru</a>  
  <ul>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  <li><a href="#">ZorNet.Ru</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Поддержка</a></li>  
</ul>  
</div>


CSS:

Код
#container {  
  position: relative;  
  width: 940px;  
  }  

  #container:after {  
  content: "";  
  display: block;  
  clear: both;  
  height: 0;  
  }  

  #menu {  
  position: relative;  
  float: left;  
  width: 100%;  
  padding: 0 20px;  
  border-radius: 3px;  
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);  
  background: #ccc;  
  }  

  #menu, #menu ul {  
  list-style: none;  
  }  

  #menu > li {  
  float: left;  
  position: relative;  
  border-right: 1px solid rgba(0,0,0,.1);  
  box-shadow: 1px 0 0 rgba(255,255,255,.25);  
  perspective: 1000px;  
   
  }  

  #menu > li:first-child {  
  border-left: 1px solid rgba(255,255,255,.25);  
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);  
  }  

  #menu a {  
  display: block;  
  position: relative;  
  z-index: 10;  
  padding: 13px 20px 13px 20px;  
  text-decoration: none;  
  color: rgba(75,75,75,1);  
  line-height: 1;  
  font-weight: 600;  
  font-size: 12px;  
  letter-spacing: -.05em;  
  background: transparent;  
  text-shadow: 0 1px 1px rgba(255,255,255,.9);  
  transition: all .25s ease-in-out;  
   
  }  

  #menu > li:hover > a {  
  background: #333;  
  color: rgba(0,223,252,1);  
  text-shadow: none;  
  }  

  #menu li ul {  
  position: absolute;  
  left: 0;  
  z-index: 1;  
  width: 200px;  
  padding: 0;  
  opacity: 0;  
  visibility: hidden;  
  border-bottom-left-radius: 4px;  
  border-bottom-right-radius: 4px;  
  background: transparent;  
  overflow: hidden;  
  transform-origin: 50% 0%;  
  }  

  #menu li:hover ul {  
   
  padding: 15px 0;  
  background: #333;  
  opacity: 1;  
  visibility: visible;  
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);  
  animation-name: swingdown;  
  animation-duration: 1s;  
  animation-timing-function: ease;  

  }  

  @keyframes swingdown {  
  0% {  
  opacity: .99999;  
  transform: rotateX(90deg);  
  }  

  30% {  
  transform: rotateX(-20deg) rotateY(5deg);  
  animation-timing-function: ease-in-out;  
  }  

  65% {  
  transform: rotateX(20deg) rotateY(-3deg);  
  animation-timing-function: ease-in-out;  
  }  

  100% {  
  transform: rotateX(0);  
  animation-timing-function: ease-in-out;  
  }  
  }  

  #menu li li a {  
  padding-left: 15px;  
  font-weight: 400;  
  color: #ddd;  
  text-shadow: none;  
  border-top: dotted 1px transparent;  
  border-bottom: dotted 1px transparent;  
  transition: all .15s linear;  
  }  

  #menu li li a:hover {  
  color: rgba(0,223,252,1);  
  border-top: dotted 1px rgba(255,255,255,.15);  
  border-bottom: dotted 1px rgba(255,255,255,.15);  
  background: rgba(0,223,252,.02);  
  }


Можно посмотреть Demo на меню.
18.01.2016 Просмотров: 355 Комментарий: (10)

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

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

Комментарий: 10
Tergran
Tergran 18.01.2016 21:061
0
Нормальна для паблика будет.
Brung
Brung 18.01.2016 21:112
0
А что не показали, что как будет смотреться при наведение уже категорий в темном оттенке, смотрим.

Сафрон
Сафрон 18.01.2016 22:383
0
Так смотрится не чего, больше на блог или сайт с одним модулем подойдет.
Canon
Canon 18.01.2016 22:424
0
Почему так решили, думаю, что оно небольшое, но это не проблема больше сделать и поставить на полноценный сайт.
Maryges
Maryges 18.01.2016 22:575
0
Brung, но какого хрена ты поставил так, а не на увеличение.
Tergran
Tergran 18.01.2016 23:026
0
Maryges, а вам демо мало, или вы его не заметили.)
Kosten
Kosten 18.01.2016 23:047
0
Тут нужно сказать - что на чистых стилях горизонтальное выведено.
ucozmental
ucozmental 19.01.2016 01:088
0
Установил его, но по дизайну не подошло, зато теперь понимаю как это делать.
Kosten
Kosten 19.01.2016 01:129
0
Так что там ставить, все же написано, что куда ставить.
FeStemBer
FeStemBer 19.01.2016 22:5610
0
Просто горизонтальное меню, но с красивый эффектом, здесь нужно добавить.
avatar