hauptmenü aber wie?

[JoLe05]

hallo leute,

ich möchte gerne wissen wie man so ein Menü erstellt? Und zwar meine ich die hauptnavi(in rot)...


alleine mit einem hover effekt ist es nicht getan, den der erscheint sofort und es sieht einfach nicht schön aus...

kann man das nur mittels js umsetzen? ich habe mal von jquery gehört, weiss aber noch nicht was das ist(bin noch am anfang)

danke für eure hilfe und tips

 

[LaFaSiLuc]

AW: hauptmenü aber wie?

hier ist es mit CSS3 Transitions umgesetzt. Funktioniert nicht in jedem browser, sieht aber auf jeden Fall schick aus

PS Transform ist auch dabei, dieses hellere rot, das beim hovern erscheint, wird wohl "vergrößert".
Mit firebug kannst du das alles rausfinden.
Hier: http://www.olivergast.de/wp-content/demos/transitions/index.html gibts ne tolle Übersicht über diese Effekte

 

[JoLe05]

AW: hauptmenü aber wie?

vielen dank, werd ich mir gleich reinziehen

ich schätze mal probleme gibt es bei IE

 

[simonpicos]

AW: hauptmenü aber wie?

Ja, das wird es.. Selbst der IE9 unterstützt CSS3 nur in sehr begrenztem Maße.
Mit der 10er Version (gibts bereits mit Windows 8 ) ändert sich das glücklicherweise

 

[manfred_hst]

AW: hauptmenü aber wie?

das ist ein superfish-menu, kann man im Seitenquelltext nachlesen. und noch ein wenig mit transitions aufgepeppt. funktioniert auch im IE9.

 

[simonpicos]

AW: hauptmenü aber wie?

Gerade für ein einfaches drop-down-menü finde ich braucht es noch nicht mal jQuery. Das kann man komplett mit CSS lösen. Die alten Browser unterstützen dann halt eben nicht die schönen fadings und so
Aber wer mit nem alten Browser surft ist selbst schuld.. (Mal von den Leuten abgesehen, die auf ihrem Arbeitsplatz nur so was altes haben)

 

[JoLe05]

AW: hauptmenü aber wie?

hmm irgendwie will das nicht klappen! vll könnte mir einer helfen

html:
<div id="menue">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Arts</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>

css:
#menue{ margin-top: 40px; height: 70px; background: url(../images/menue1.jpg) repeat-x;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; }
#menue a:hover{ background: url(../images/menue_hover.jpg);}
#menue ul { list-style: none; float: left;}
#menue ul li { float: left;}
#menue li a { float: left; display: block; padding: 0 42px; line-height: 70px; color: #fff; background: url(../images/menue_trennstrich.jpg) top right no-repeat; }

 

[simonpicos]

AW: hauptmenü aber wie?

Was funktioniert denn nicht?
Ich gehe mal davon aus, dass es das Hintergrundbild ist. Diese können (noch?) nicht mit CSS animiert werden.

p.s. es gibt hier ein codewerkzeug in der Ansicht "erweitert"

 

[LaFaSiLuc]

AW: hauptmenü aber wie?

Nein, da wird auch kein Bild animiert, sondern nur die Farbfläche "vergrößert"

PS: Superfish ist doch nur dieses ausgeklappte, oder was war das noch?

 

[JoLe05]

AW: hauptmenü aber wie?

ups sorry

naja er wendet den effekt halt nicht an... schade aber wie hat der typ das dann hinbekommen, weil der hat auch images benutzt für den hoover effekt....

 

[simonpicos]

AW: hauptmenü aber wie?

jap, LaFa, das wars

also auf der site ist das so gelöst, dass das hover-bild in einem eigenen strong-tag hinterlegt ist. Dieser ist dann im Normalzustand um 50px nach unten geschoben (mit transform:translate) und die opacity ist auf 0 gesetzt. Bei hover wird das Bild hochgeschoben und die opacity hochgedreht

 

[JoLe05]

AW: hauptmenü aber wie?

ach herje

danke für den tip ich werd das dann gleich mal ausprobieren...

aber iwann muss das halt schon kommen das mit css3 auch pics animiert werden können...

 

[Rata]

AW: hauptmenü aber wie?

Hier: http://www.olivergast.de/wp-content/demos/transitions/index.html gibts ne tolle Übersicht über diese Effekte

Coooooler Link, mein Dank waaaaatschelt Dir auf Stunden bis Tage hinterher



Lieber Gruß
Rata

8)