Wysuwane menu po najechaniu jQuery

Dla specjalistów Webmastering
#1
#2

co do sytuacji że jeden div tylko działa to poniżej rozwiązanie

$("div.z_balonikiem")

            .mouseover(function(){

               $(this).animate({"height":"300"}, 500);

            })

            .mouseout(function(){

               $(this).animate({"height":"100"}, 500);

            });

nie możesz nadawać kilku elementom na stronie tego samego id i oczekiwać że wszystko będzie działać ok.

id powinno być unikalne na całej stronie (do tego zostało stworzone) natomiast do grupowanie używa się klas i powyższe rozwiązanie opiera się właśnie na tej właściwości.

Natomiast co do ie to nie mogę się doszukąć czemu nie działa

Zauwaźyłem że używasz jquery 1.2 a to juź troche stare wydanie także dobrze by to było podmienić na 1.4 lub 1.5

Co prawda strona grafika.pl działa pod ie ale strona z tutorialem już nie

#3

Spróbuj tego!

http://www.kurshtml.edu.pl/skrypty/menu … ijane.html

Może coś znajdziesz na:

http://www.kurshtml.edu.pl/skrypty/menu_rozwijane.html

Albo spróbuj takie coś, jednakże tutaj zrobiłem bez takiego powolnego na dół

Styl .css

a#menu{ 

color:black;

text-decoration:none;

position: absolute;

top: 5px;

left: 10px;

}


a:hover#menu

{

color:blue;

text-decoration:none;

position: absolute;

top: 20px;

left: 10px;

}


a:active#menu

{

color:blue;

text-decoration:none;

position: absolute;

top: 5px;

left: 10px;

}

W html

Link testowy[/code]




Na przykładzie dając taki CSS

[code] a#menu{ color:black; text-decoration:none; position: absolute; top: 5px; left: 10px; } a:hover#menu { color:blue; text-decoration:none; position: absolute; top: 20px; left: 10px; } a:active#menu { color:blue; text-decoration:none; position: absolute; top: 5px; left: 10px; } a#menu2{ color:black; text-decoration:none; position: absolute; top: 5px; left: 100px; } a:hover#menu2 { color:blue; text-decoration:none; position: absolute; top: 20px; left: 100px; } a:active#menu2 { color:blue; text-decoration:none; position: absolute; top: 5px; left: 100px; } a#menu3{ color:black; text-decoration:none; position: absolute; top: 5px; left: 200px; } a:hover#menu3 { color:blue; text-decoration:none; position: absolute; top: 20px; left: 200px; } a:active#menu3 { color:blue; text-decoration:none; position: absolute; top: 5px; left: 200px; } a#menu4{ color:black; text-decoration:none; position: absolute; top: 5px; left: 300px; } a:hover#menu4 { color:blue; text-decoration:none; position: absolute; top: 20px; left: 300px; } a:active#menu4 { color:blue; text-decoration:none; position: absolute; top: 5px; left: 300px; }
i taki HTML:

Link testowyLink testowyLink testowyLink testowy

[/code]

Powstaje nawet całkiem ciekawe menu

Mam nadzieję, że nie popełniłem błędu, ponieważ mam inne sprawy na głowie. Jakby co pisz śmiało :slight_smile:

#4