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: 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-Feedabonnieren Ü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: 06.06.2023 / 00:00:16 | ||||
Hover mich
