Падащо меню

H_Kolev

Registered
Здравейте, как мога да направя падащо меню като това на снимката
6091536X.png


Това е менюто ми - HTML/CSS
http://web-tourist.net/userfiles/5/5374.rar

към Категории искам да има 18 падащи менюта ...
 
Най-лесния начин които се сещам сега,ще е да направиш един div точно под менюто , да му дадеш display:none; и със jquery да зададеш при преминаване на мишката на li id="categorii" да се показва този див които ги съдържа,а при махане на мишката от него да изчезват.

Има доста вариации но това е най-лесното като изработка и време.
Ако те интересува мога да ти дам jquery но ти трябва да си ги позиционираш и стилизираш както прецениш. :)

Или пък погледни тук:PURE CSS dropdown menu
 
Пробвах, точно по линка който си дал, но не става, няколко дни се мъчех но не стана... Ако може някой да ми го направи ще съм му много благодарен... +1
 
Значи да приемем, че бутона е li id='categorii', този див който ще се показва се казва да речем class='subbuttons' , който има и class='subbuttons displayNone'



jQuery:

Код:
$(document).ready(function() {

$("li #categorii").bind("mouseover", function(){

$(".subbuttons").removeClass("displayNone");

});

$(".subbuttons").bind("mouseleave", function(){

$(".subbuttons").addClass("displayNone");

});

});
 
Това което съм ти го написал си го слагаш в един js файл. Но отделно ще трябва да си заредиш и Jquery библиотеката
 
Неможах да разбера.. това го направих в отделен файл, но не стана... обяснете ми малко по подробно.. не съм толкова добър...
 
Както си дал менюто намери <li><a...>Категории</a></li>
и му задай ID , тоест
<li id="categories">...

после в едни javascript тагове слагаш
Код:
<script>
$(document).ready(function(){
$("li#categories").mouseenter(function(){
$("div#allcats").slideDown(1000);
}).mouseleave(function(){
$("div#allcats").slideUp(1000);
});
});
</script>
и сега в един див
Код:
<div id="allcats" style="display:none;">Categori1 <br> category2<br>...</div>
Дано си ме разбрал този път.

ПС:За цялото това нещо трябва да сложиш jquery:
Код:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 

Back
Горе