[Erledigt] Menü - Ideensammlung

richardf · 14.09.2010, 10:45

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":

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

xm22 · 14.09.2010, 12:59

Mach mal bitte eine Zeichnung, in der die ganzen Bereiche gekennzeichnet sind.

mermshaus · 14.09.2010, 13:17

Ungefähr so vielleicht (quick & dirty).

HTML-Code:

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

* { margin: 0; padding: 0; }

#menu li {
    float: left;
    list-style: none;
}

#menu li a {
    display: block;
    background: top left repeat-x #B5E61D;
    padding: 160px 0 10px 0;
    width: 80px;
    border-right: 1px solid black;
}

#menu li a span {
    background: #FF7F27;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    display: block;
}

#menu li a:hover, #menu li a.active {
    background-color: #22B14C;
}

/* Hintergrundbilder, nicht aktiv */

#menu #menu1 {
    background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
}
#menu #menu2 {
    background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
}
#menu #menu3 {
    background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
}
#menu #menu4 {
    background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
}

/* Hintergrundbilder, aktiv */

#menu #menu1:hover, #menu #menu1.active {
    background-image: url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');
}

#menu #menu2:hover, #menu #menu2.active {
    background-image: url('http://www.google.com/logos/2010/teachersday10-hp.gif');
}

#menu #menu3:hover, #menu #menu3.active {
    background-image: url('http://www.google.com/logos/2010/firstdayofschool10-hp.gif');
}

#menu #menu4:hover, #menu #menu4.active {
    background-image: url('http://www.google.com/logos/2010/indonesia_ind10-hp.gif');
}

        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a id="menu1" href="./"><span>Item</span></a></li>
            <li><a id="menu2" href="./"><span>Item</span></a></li>
            <li><a class="active" id="menu3" href="./"><span>Item</span></a></li>
            <li><a id="menu4" href="./"><span>Item</span></a></li>
        </ul>
    </body>

</html>

richardf · 14.09.2010, 13:18

Zitat:

Zitat von xm22

Mach mal bitte eine Zeichnung, in der die ganzen Bereiche gekennzeichnet sind.

in meinem Beispiel ist Menü II mit der Klasse .active ausgestattet.
Gleicher Effekt sollte dann bei einem Hover-Effekt auftreten.

ChrisB · 14.09.2010, 13:44

Zitat:

Zitat von richardf

-Im Top-Bereich wird pro Menü-Item ein Image eingeblendet (wenn möglich nicht als BG).

Warum nicht - transportieren die Bilder Inhalt?

Zitat:

-Im Center-Bereich kann die Seite navigiert werden

Nur den kleinen Bereich klickbar zu machen, wenn der große Bereich darüber beim Hovern visuelles Feedback liefert, wäre m.E. unklug.

Zitat:

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

In deinem Bildchen ist für mich nicht erkennbar, wofür du Border-Images brauchen würdest.

Edit: Auch noch wichtig: Sind die Maße fest oder variabel, soll die Schriftgröße relativ sein oder absolut?

nikosch · 14.09.2010, 13:51

Ohne bg-Images musst Du das mit Javascript machen - davon würde ich nur abraten. Auch :hover bzw. :active fallen dann natürlich aus.

Mit Rahmen macht man das natürlich auch nicht.

ChrisB · 14.09.2010, 14:09

Zitat:

Zitat von nikosch

Ohne bg-Images musst Du das mit Javascript machen

Muss man nicht unbedingt ... aber bei den bisher genannten Anforderungen sehe ich noch keine Notwendigkeit, JS zu verwenden.

CSS Sprites bieten sich an (nein, drängen sich auf), um das ganze mit akzeptabler Ladezeit-Performance umzusetzen.

nikosch · 14.09.2010, 14:12

Doch, muss man.

Zitat:

Bei .active-Class, oder bei einem Hover ändert sich dieses Hintergrundbild

Aktive Komponenten sind entweder CSS-Pseudoklassen (was wohl auf BG-Images hinausläuft) oder Javascript. Vielleicht könnte man noch Images unsichtbar schalten, aber naja..

ChrisB · 14.09.2010, 14:21

Zitat:

Zitat von nikosch

Doch, muss man.

Nein, muss man nicht.
Die (bzw. eine) potentielle Möglichkeit nennst du ja schon selber.

Dass diese Möglichkeiten nicht das Gelbe vom Ei sind, ist klar.
Wie gesagt, ich würde auch Hintergrundbilder empfehlen, wenn die Grafiken Verzierung sind und keinen Inhalt transportieren sollen.

richardf · 14.09.2010, 15:21

super, vielen Dank an alle, insbesondere an mermshaus!

gegen den Einsatz von JS spricht prinzipiell nichts, ist natürlich mit CSS schon viel einfacher zum Warten.

Danke nochmals

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Textdatenbank zeilenweise alphabetisch sortieren - Drop Down Menü alphabet	UdoDirk	PHP Tipps 2010	1	24.07.2010 10:45
Drop Down Menü aus text-Datenbank - andere Möglichkeit für erste Zeile?	UdoDirk	PHP Tipps 2010	7	21.07.2010 22:25
Menü mittels php automatisch an Inhalt von text-Datenbank anpassen - Lösung	UdoDirk	PHP Tipps 2010	0	15.07.2010 14:31
[Erledigt] IE Quirks Modus und Menu	chunky	HTML, Usability und Barrierefreiheit	9	10.02.2010 16:27
Frage.: Dymanisches Datum im Drop Down Menü möglich?	badboygoofy	JavaScript, Ajax und mehr	1	24.07.2009 14:34
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
Hierarchiches Menu bauen ?		PHP-Fortgeschrittene	5	20.09.2004 15:19
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11

14.09.2010, 10:45
richardf Neuer Benutzer Registriert seit: 13.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Menü - Ideensammlung 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": 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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.09.2010, 12:59
xm22 Erfahrener Benutzer Registriert seit: 30.07.2008 Beiträge: 1.167 PHP-Kenntnisse: Fortgeschritten	Mach mal bitte eine Zeichnung, in der die ganzen Bereiche gekennzeichnet sind.

14.09.2010, 13:51
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ohne bg-Images musst Du das mit Javascript machen - davon würde ich nur abraten. Auch :hover bzw. :active fallen dann natürlich aus. Mit Rahmen macht man das natürlich auch nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

14.09.2010, 15:21
richardf Neuer Benutzer Registriert seit: 13.01.2010 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	super, vielen Dank an alle, insbesondere an mermshaus! gegen den Einsatz von JS spricht prinzipiell nichts, ist natürlich mit CSS schon viel einfacher zum Warten. Danke nochmals