Для оригинальности сайта и его функциональности, этот скрипт Кнопки горизонтального меню для uCoz безусловно найдет место на вашем ресурсе. Вы можете просто установить один раздел, в котором идут рубрики и они только появятся при крике на тот или иной созданы вами категорию. Если присмотреться, то можно выстроить и навигацию полную, что также обязательно будет на вашем сайте. Но здесь я думаю нужно подходить оригинально и к примеру установить по верх блока или его низа. Написать саму суть, где производиться нажатие и появляется вся информация.
Код:
Код <div id="demo"> <div class="wrapper"> <div class="content"> <ul> <a href="#"><li>ZORNET.RU</li></a> <a href="#"><li>Все для сайта</li></a> <a href="#"><li>ZORNET.RU</li></a> <a href="#"><li>Все для сайта</li></a> </ul> </div> <div class="parent">Скрипты для uCoz</div> </div> <div class="wrapper"> <div class="content"> <ul> <a href="#"><li>Игровые шаблоны</li></a> <a href="#"><li>Шаблоны софт портал</li></a> <a href="#"><li>Разноплановые</li></a> <a href="#"><li>Оригинальные</li></a> </ul> </div> <div class="parent">Шаблоны для uCoz</div> </div>
CSS:
Код #demo { margin: 30px 0 50px 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } #demo .wrapper { display: inline-block; width: 180px; margin: 0 10px 0 0; height: 20px; position: relative; } #demo .parent { height: 100%; width: 100%; display: block; cursor: pointer; line-height: 30px; height: 30px; border-radius: 5px; background: #F9F9F9; border: 1px solid #AAA; border-bottom: 1px solid #777; color: #282D31; font-weight: bold; z-index: 2; position: relative; -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear; -webkit-transition-delay: .8s; text-align: center; } #demo .parent:hover, #demo .content:hover ~ .parent { background: #fff; -webkit-transition-delay: 0s, 0s, 0s; } #demo .content:hover ~ .parent { border-bottom-left-radius: 0; border-bottom-right-radius: 0; z-index: 0; } #demo .content { position: absolute; top: 0; display: block; z-index: 1; height: 0; width: 180px; padding-top: 30px; -webkit-transition: height .5s ease; -webkit-transition-delay: .4s; border: 1px solid #777; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.4); } #demo .wrapper:active .content { height: 123px; z-index: 3; -webkit-transition-delay: 0s; } #demo .content:hover { height: 123px; z-index: 3; -webkit-transition-delay: 0s; } #demo .content ul { background: #fff; margin: 0; padding: 0; overflow: hidden; height: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #demo .content ul a { text-decoration: none; } #demo .content li:hover { background: #eee; color: #333; } #demo .content li { list-style: none; text-align: left; color: #888; font-size: 14px; line-height: 30px; height: 30px; padding-left: 10px; border-top: 1px solid #ccc; } #demo .content li:last-of-type { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
Смотрим:
|