Материалы
Drop Down Menu, Выпадающее вертикальное меню категорий, скрипты меню uCoz

Drop Down Menu / Выпадающее вертикальное меню категорий

Выпадающее вертикальное меню выбора категорий или Drop Down Menu, красивый и яркий пример красоты категорий на uCoz, хорошее и приятное решение. Очень хорошо сочетается с светлыми стилями шаблонов.

Установка:

1.Вставляем следующий код перед закрытием тега 
</body>

Код
<script type="text/javascript" >  
  $(function() {  
   
$('.dd-menu-a').click(function(){  
  $(this).next('.cell-uotvet-ddm').toggle();  
});  

$(document).click(function(e) {  
  var target = e.target;  
  if (!$(target).is('.dd-menu-a') && !$(target).parents().is('.dd-menu-a')) {  
  $('.cell-uotvet-ddm').hide();  
  }  
});  

});  

$('.catNumData, .postpSwithces').each(function () {  
$(this).html($(this).html().replace(/\[|\]/g, ''));  
});  
</script>
2. Вставляем код в любое место где вы хотите видеть категории:

Код

<div class="dd-menu"><a class="dd-menu-a" href="#">Выбор категории</a>

<div class="cell-uotvet-ddm">$CATEGORIES$</div>
</div>
3. И последний шаг вставляем в самый низ таблицы стилей CSS

 
Код
/* Меню категорий -----------------------------------------*/ .dd-menu { float:left; width:250px; position:relative; } .dd-menu-a { float:left; width:220px; background:#fff; padding:12px 15px; font:12px Verdana,Arial,Helvetica, sans-serif; font-weight:bold; border-radius:3px; } .dd-menu-a:link, .dd-menu-a:visited {color:#777; } .dd-menu-a:hover {color:#E1487C; } .dd-menu-a span { float:right; width:14px; height:14px; background:url(картинка меню любая) right top no-repeat; } .cell-uotvet-ddm { top:55px; width:100%; display:none; position: absolute; } .cell-uotvet-ddm:after { bottom: 100%; right: 6%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 8px; margin-left: -10px; } .cell-uotvet-ddm .catsTable { background:#fff; overflow: hidden; border-radius:3px; border-collapse:0px; border-spacing: 0px; } .cell-uotvet-ddm td { position:relative; } .cell-uotvet-ddm td a:link, .cell-uotvet-ddm td a:visited, .cell-uotvet-ddm td a:active { float:left; width:220px; padding: 10px 15px 10px 15px; font:12px Verdana,Arial,sans-serif; color:#555; } .cell-uotvet-ddm .catNameActive, .cell-uotvet-ddm td a:hover{ color:#fff; background:#F9ADA0; } .cell-uotvet-ddm .catNumData { font:9px Verdana,Arial,sans-serif; font-weight: bold; color:#999; position:absolute; top: 12px; right: 15px; } .cell-uotvet-ddm td:hover .catNumData{ color:#fff; }

Советуем к просмотру:

Сохраните в социальную сеть
Прикрипления
Отсутствуют  

Комментарии
Комментариев пока нет, вы можете оставить комментарий первым.
Оставить комментарий
avatar