Вертикальное выпадающее меню выбора категорий для ucoz

Вертикальное выпадающее меню выбора категорий для ucoz

Вертикальное выпадающее меню выбора категорий для ucoz-на сегодня вашему взору предоставляется файл или скрипт который заменит ваш,видимо же надоевший вид категорий,на красивый и стильный,не обращайте внимания что он розового цвета все это поправимо

Установка:Это ставим в низ страницы перед закрывающимся тегом

Код
<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>


HTML каркас

Код
<div class="dd-menu">  
  <a href="#" class="dd-menu-a">Выбор категории<span></span></a>  
  <div class="cell-uotvet-ddm">$CATEGORIES$</div>  
  </div>


СSS
Код
/* Меню категорий  
-----------------------------------------*/  
.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(http://www.uotvet.ru/ucoz/menu/4/ico_menu.png) 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;  
}
Вертикальное выпадающее меню выбора категорий для ucoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar