Горизонтальное меню 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 на меню.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
| |
