<< Javascript Scrolltext >> Dateien tabellarisch ausgeben

eforia web manager Blog

DropDown-Menü mit Javascript supereinfach


Nachdem der Praxistipp von letzter Woche so gut angekommen ist, hier gleich nochmal etwas aus der Praxis. Diesmal aber vollkommen unabhängig von eforia. Es handelt sich schlicht um ein minimalistisches DropDown-Menü. Minimalistisch bezieht sich dabei auf die verwendete Technik. Es sind nämlich nur 2 Inline-Javascript-Funktionen, die notwendig sind.

Beispiel:

Hover mich

Startseite
Blog
Download


Es wird einfach ein Div dargestellt, dessen Höhe beschnitten ist. Erst ein onmouseover macht den verdeckten Teil sichtbar. Ultrasimpel und effektiv. Durch Verwendung von Hintergrundgrafiken im Div kann man auch leicht einen grafischen Button erzeugen. Besonders wenn man etwas schöner gestaltet und ein Padding nutzt, ist das oft einfacher als eine Grafik im Inhalt.

In der obigen Variante verschiebt sich der folgende Inhalt nach hinten. Das kann man leicht ändern, indem man dem div ein position:relative verpasst. Ebenso könnte man die Höhe so groß setzen, dass sofort alles sichtbar ist und erst mit einer zusätzlichen Script-Anweisung die Höhe beschränken. Dann wäre der Inhalt auch bei abgeschalteten Javascript verfügbar.

Hier der Code für das Beispiel:
<div onmouseover="document.getElementById('easydropdown').style.height='80px';" onmouseout="document.getElementById('easydropdown').style.height='30px';" id="easydropdown" style="height:30px;width:120px;background:url(/gfx/eforia-revolution-cup-33x30.jpg) no-repeat;background-position:top left;padding:0;overflow:hidden;border:1px dashed #cccccc;">
<img src="../sysimg/spacer.gif" width="40" height="30" align="left">Hover mich<br /><br />
<a href="{link="/eforia® web manager"}">Startseite</a><br />
<a href="{link="/eforia® web manager/Blog"}">Blog</a><br />
<a href="{link="/eforia® web manager/Download"}">Download</a><br />
</div>

Mir ist bekannt, dass man sowas viel toller und besser machen kann. Auch mit vielen Javascript-Frameworks. Aber es geht eben auch ganz einfach. Und einfach finde ich immer besser. Ich habe nämlich wenig Lust, bei jeder Neuerscheinung eines Browsers alle alten Projekte nochmal anpassen zu müssen. Ich will hier keine Namen nennen, aber mit einigen Javascript-Frameworks ist (bzw. wäre) das notwendig.



Dieser Artikel wurde veröffentlicht am 22.02.2010 um 10:58 Uhr. Tags: praxistipp  javascript  html  navigation   | Permalink | Trackback URI
Ähnliche Beiträge:

Noch kein Kommentar. Sei der Erste:
Der Beitrag ist älter als 30 Tage. Keine Kommentare mehr möglich.


Hier bloggt Horst Klier mit und über eforia web manager und was dazugehört (HTML, Javascript, Internet, Webdesign, Such- maschinenoptimierung, usw.).

>> Zur Blog Startseite

RSS-Feed
abonnieren


Übersicht über alle Beiträge



eforia® ist ein eingetragenes Markenzeichen der tdb Software Service GmbH.
Alle anderen Marken und Markenzeichen gehören Ihren jeweiligen Besitzern.
Letzte Aktualisierung dieser Seite: 28.03.2024 / 00:00:08
Suche  
Impressum