Регистрация    Войти
Авторизация

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

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

В этом решении мы будем создавать выпадающее меню для ucoz или Drop Down Menu

Всем привет, сегодня мне на глаза попался PSD исходник от автора Alex Vanderzon и я решил его сверстать для uCoz.

Безусловно не в один в один, а приближённо к оригиналу, так как при адаптации под uCoz возникли десятки проблем, из-за чего я отказался от иконок в меню.


Шаг 1 - Установим JS:
Для начала давайте установим JS, для этого в самый низ страницы перед закрывающим тегом устанавливаем следующий код:
<script type="text/javascript" > 
  &#65279;&#65279;$(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 - Установим HTML:
Далее следует создать HTML каркас данного выпадающего меню uCoz и поместить туда переменную, отвечающею за отображение меню выбора категорий:
<div class="dd-menu"> 
  <a href="#" class="dd-menu-a">Выбор категории<span></span></a>  
  <div class="cell-uotvet-ddm">$CATEGORIES$</div> 
  </div>



Шаг 3 - Установим CSS:
Теперь когда меню готово, следует его стилизовать, для этого пропишем следующие 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(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;  
}


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  9-12-2014, 00:11   Просмотров: 2494   
меню, Меню ucoz, Вертикальное выпадающее меню, Вертикальное выпадающее меню ucoz, выпадающее меню. выпадающее меню ucoz, Вертикальное меню, Вертикальное меню ucoz, Drop Down Menu, Drop Down Menu ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.