Guten Morgen,
Ich muss zur Zeit ein Menü umsetzen, wo mir die Realisierungsideen fehlt, bzw. meine nicht fruchten wollten...
So ist das Menü aufgebaut:
-Im Top-Bereich wird pro Menü-Item ein Image eingeblendet (wenn möglich nicht als BG).
Bei .active-Class, oder bei einem Hover ändert sich dieses Hintergrundbild
-Im Center-Bereich kann die Seite navigiert werden
-Im Bottom-Bereich ändert sich die Farbe, bei .active, oder bei einem Hover.
Als Voraussetzung ist gegeben:
-Für alle verbreitete Browser korrekte Anzeige (IE >= 7, Firefox, Safari)
-Für JavaScript-Interaktion JQuery
-Möglichst einfach wartbar.
Meine Ansätze waren:
a) Umsetzung als komplette List (ul mit CSS gestaltet).
Border-Top und Bottom für Top- und Bottom-Bereich.
Problem: Image bei Border erst mit CSS3 möglich
b) Umsetzung als Hybrid List & Table:
Top-Bereich als Table, Middle- und Bottom-Bereich mit List.
Problem: praktisch alle Browser haben eine schlechte Darstellung je nach Zoom:
c) Menü als Table.
Problem: extrem mühsame Wartung.
Ich wollte mit JQuery einen mehr oder weniger praktischen Selector basteln, endet aber immer mit der Ausgabe "undefinied":
Hat jemand noch eine gute Idee?
Vielen Dank.
Gruss,
Richard
Ich muss zur Zeit ein Menü umsetzen, wo mir die Realisierungsideen fehlt, bzw. meine nicht fruchten wollten...
So ist das Menü aufgebaut:
-Im Top-Bereich wird pro Menü-Item ein Image eingeblendet (wenn möglich nicht als BG).
Bei .active-Class, oder bei einem Hover ändert sich dieses Hintergrundbild
-Im Center-Bereich kann die Seite navigiert werden
-Im Bottom-Bereich ändert sich die Farbe, bei .active, oder bei einem Hover.
Als Voraussetzung ist gegeben:
-Für alle verbreitete Browser korrekte Anzeige (IE >= 7, Firefox, Safari)
-Für JavaScript-Interaktion JQuery
-Möglichst einfach wartbar.
Meine Ansätze waren:
a) Umsetzung als komplette List (ul mit CSS gestaltet).
Border-Top und Bottom für Top- und Bottom-Bereich.
Problem: Image bei Border erst mit CSS3 möglich
b) Umsetzung als Hybrid List & Table:
Top-Bereich als Table, Middle- und Bottom-Bereich mit List.
Problem: praktisch alle Browser haben eine schlechte Darstellung je nach Zoom:
c) Menü als Table.
Problem: extrem mühsame Wartung.
Ich wollte mit JQuery einen mehr oder weniger praktischen Selector basteln, endet aber immer mit der Ausgabe "undefinied":
Code:
<table> <tr class="banner"> <td id="mt_1" class="active"></td> <td id="mt_2"></td> <td id="mt_3"></td> <td id="mt_4"></td> <td id="mt_5"></td> </tr> <tr class="menu"> <td id="mc_1"><a href="#" title="" class="active">Profil</a></td> <td id="mc_2"><a href="#" title="">Messages</a></td> <td id="mc_3"><a href="#" title="">Favoriten</a></td> <td id="mc_4"><a href="#" title="">Events</a></td> <td id="mc_5"><a href="#" title="">Einstellungen</a></td> </tr> <tr class="line"> <td id="mb_1" class="active"></td> <td id="mb_2"></td> <td id="mb_3"></td> <td id="mb_4"></td> <td id="mb_5"></td> </tr> </table>
Code:
<script language="JavaScript"> $(document).ready(function () { $("#header .menu").mouseover(function () { alert($(this).id); }); }); </script>
Hat jemand noch eine gute Idee?
Vielen Dank.
Gruss,
Richard
Kommentar