Падащо меню

[H_Kolev]

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

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

към Категории искам да има 18 падащи менюта ...

 

[Hous]

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

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

Или пък погледни тук:PURE CSS dropdown menu

 

[H_Kolev]

Пробвах, точно по линка който си дал, но не става, няколко дни се мъчех но не стана... Ако може някой да ми го направи ще съм му много благодарен... +1

 

[odyssey]

Значи да приемем, че бутона е 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");

});

});

 

[H_Kolev]

Не съм много на "Ти" с JS ... не можах да разбера..

 

[odyssey]

Това което съм ти го написал си го слагаш в един js файл. Но отделно ще трябва да си заредиш и Jquery библиотеката

 

[H_Kolev]

Неможах да разбера.. това го направих в отделен файл, но не стана... обяснете ми малко по подробно.. не съм толкова добър...

 

[Hous]

Както си дал менюто намери <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>