[Erledigt] CSS Drop Down Menu mit Zend Framework

MLang · 22.04.2011, 15:57

Servus,

ich versuche mich gerade in Zend einzuarbeiten. Derzeit spiele ich mit der Navigation rum aber finde keine andere Möglichkeit außer einer unsortierten Liste als Anzeige des Menüs.

Ich welcher Richtung muss ich suchen, wenn ich so etwas erstellen möchte. Habe mir jetzt auch schon einige Tutorials gegoogelt aber es war nix brauchbares dabei.

Nutze Zend Version 1.11.5

Wäre für einen Schubs in die richtige Richtung dankbar.

ChrisB · 22.04.2011, 16:23

Zitat:

Zitat von MLang

Ich welcher Richtung muss ich suchen, wenn ich so etwas erstellen möchte.

In der, die sich mit den entsprechenden clientseitigen Techniken beschäftigt.

Menüs als (verschachtelte) Listen von Links auszuzeichnen, ist state-of-the-art.
Wie die Darstellung dieser Listen dann erfolgt, ist in erster Linie eine Frage der Formatierung (CSS) und ggf. auch noch von clientseitigem Scripting.

MLang · 22.04.2011, 19:00

Gibt also keine Layoutmöglichkeit innerhalb von Zend in der man sagen kann, dass man gerne ein horizontales Menu haben möchte. Also muss ich an CSS ran und das entsprechend definieren.

Mal ein weiterführende Frage. Ich habe jetzt schon mehrere Tutorials gesehen in denen das Menu entweder per XML oder über ein Array definiert wird. Welche der beiden Methoden eignet sich denn eher, wenn man auf Basis einer ACL zusätzliche Menüpunkte erweitern will.

Ich habe gesehen, dass es Methoden gibt um das Menü um entsprechende Menüpunkte zu erweitern habe dies aber nur in Verbindung mit der Array Variante gesehen. Ist das Erweitern auch mit einer XML Konfiguration möglich ?

ChrisB · 22.04.2011, 19:35

Zitat:

Zitat von MLang

Gibt also keine Layoutmöglichkeit innerhalb von Zend in der man sagen kann, dass man gerne ein horizontales Menu haben möchte.

Der Server gibt Daten in strukturierter Form aus.
Deren Darstellung (nach Interpretation der Struktur) ist Aufgabe des Clients (Browser).

Zitat:

Also muss ich an CSS ran und das entsprechend definieren.

Selbstverständlich - CSS ist schon seit langem für die Darstellung verantwortlich

MLang · 22.04.2011, 20:04

Ich habe jetzt ein bisschen probiert und habe die erste Ebene des Menüs Horizontal dummerweise auch alle Unterpunkt. Ist ein verschachteltes Menü über mehrere Ebenen. In den Tutorials die ich jetzt zum Thema CSS und Horizontale verschachtelte Menü gelesen habe kommt es immer wieder vor, das dem UL oder LI Element eine ID oder eine Style Class verpasst wird und auf dieser Basis per CSS definiert wird.

Leider habe ich noch keine Möglichkeit gefunden wie ich diesen Elementen eine ID oder eine CSS Class zuweisen kann. Wenn ich in meiner XML eine CLASS Definition angebe wird dieser nur auf das Link Element angewendet.

Navi.xml

PHP-Code:

  <?xml version="1.0" encoding="UTF-8"?>
<config>
    <nav>
 
        <page1>
               <id>mainmenu1</id>
               <class>Test</class>
            <label>Seite 1</label>
            <uri>page1</uri>
            <pages>
 
                <page1_1>
                    <label>Seite 1.1</label>
                    <uri>page1/page1_1</uri>
                </page1_1>
 
            </pages>
        </page1>

Ergebnis:

PHP-Code:

  <ul class="navigation">
    <li class="active">
        <a href="/">Home</a>
    </li>
    <li>
        <a id="menu-mainmenu1" class="Test" href="page1">Seite 1</a>
        <ul>
            <li>
                <a href="page1/page1_1">Seite 1.1</a>
            </li>
        </ul>
    </li>

Wie bekomme ich also eine ID oder eine CLASS in die LI oder UL Elemente mit Zend Mitteln, sofern das geht ?

ChrisB · 22.04.2011, 20:11

Zitat:

Zitat von MLang

Leider habe ich noch keine Möglichkeit gefunden wie ich diesen Elementen eine ID oder eine CSS Class zuweisen kann.

Brauchst du nicht, wenn du dein Wissen über CSS mal etwas erweiterst - Nachfahrenselektor wäre bspw. ein Stichwort.

MLang · 22.04.2011, 20:39

Erstmal danke für die bisherige Hilfe und ... ich glaube ich habe das gefunden was ich brauche. Das Stichwort von dir hat mich auf die folgende Seite gebracht: http://de.selfhtml.org/css/layouts/n...ten.htm#modern. Jetzt habe ich zumindest mal die Kindebenen unter den Elternebenen. Nur bin ich jetzt am grübeln wie ich die 3 Ebene (KindKind ... Enkel ach keine Ahnung) also die dritte Ebene wieder seitlich rausgehen lass also wieder Vertikal.

EDIT:
Lösung gefunden danke für die Denk- und Suchhilfen:

So sieht der Code aus:

PHP-Code:

  @CHARSET "ISO-8859-1";
html, body, div, span, ol, ul, li{
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

.clear{clear:both;}

#menu { /* the menu container */
    background: #000;
    width: 325px;
    font-size: 13px;
}

#menu ul { /* menu ul style */
    list-style: none;
    margin: 0;
}

#menu li { /* horizontal menu */
    float: left;
    position: relative;
}

#menu a { /* the link style of menu */
    color: #aaa;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
    border-right:1px solid #666;
}
 /* The sub menu is hidden by default and its position is places right under the parent menu*/
#menu ul ul {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    float: left;
    width: 180px;
    z-index: 99999;
}
/*
This block of CSS is to deal with the sub-menu (nested menu). The CSS defines how the sub-menu and sub sub menu must be shown and positioned.
*/
/* The sub menu list element is given a minimum width */
#menu ul ul li {
    min-width: 180px;
}

/* the third level menu (sub sub menu) is placed to the left side of its parent*/
#menu ul ul ul {
    left: 100%;
    top: 0;
}

#menu ul ul a {
    background: #333;
    line-height: 1em;
    padding: 10px;
    width: 160px;
    height: auto;
}

#menu li:hover > a,
#menu ul ul :hover > a {
    background: #333;
    color: #fff;
}
#menu ul li:hover > ul {
    display: block;
}
#menu ul li:hover > ul {
    display: block;
}
/*
The following part defines how and when the sub menu must be hidden and shown. The sub menu is shown when mouse over and hidden when the mouse leaves.
*/
/* Styles the anchor (a) tag when mouse over */
#menu li:hover > a,
#menu ul ul :hover > a {
    background: #333;
    color: #fff;
}

gefunden auf: http://www.blokeish.com/2011/03/hori...ut-javascript/

Ich will mich ja nicht mit fremden Federn schmücken aber auf der Basis kann ich weiter experimentieren.

hts · 22.04.2011, 21:20

Zitat:

Zitat von MLang

gefunden auf: http://www.blokeish.com/2011/03/hori...ut-javascript/

Super Link, soetwas hätte ich vor kurzem auch benötigt. Sauber geschachtelte Liste als horizontales Menü ohne JavaScript. Der Artikel ist aber auch ganz frisch.

Ich habe dann das Beispiel aus Selfhtml abgewandelt übernommen (das einzige, was ich gefunden hatte.):
http://de.selfhtml.org/css/layouts/n...ten.htm#modern

Mit hover.htc funktioniert es sogar im IE6, wird bei dem anderen Beispiel sicher auch so sein.

ChrisB · 22.04.2011, 22:12

Zitat:

Zitat von hts

Mit hover.htc funktioniert es sogar im IE6

Dabei aber bitte bewusst machen, dass das JavaScript voraussetzt - es ist per CSS eingebundenes JScript.

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] Einfaches Drop Down Menü	inquisitive	PHP Tipps 2010	13	28.10.2010 18:59
Scriptangebot Aus Text-Datenbank automatisch sortiertes Drop Down Menü erstellen - Lösung!	UdoDirk	Scriptbörse	5	25.07.2010 13:15
[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
[Erledigt] drop down menü + mysql	php_1975	PHP Tipps 2010	32	24.06.2010 14:42
Scriptsuche [Erledigt] Drop Down Menü mit Großstadtauswahl	litterauspirna	Scriptbörse	6	06.06.2010 18:02
[Erledigt] CSS Drop Down Menü und IE Problem	gombi	HTML, Usability und Barrierefreiheit	10	18.01.2010 15:54
Frage.: Dymanisches Datum im Drop Down Menü möglich?	badboygoofy	JavaScript, Ajax und mehr	1	24.07.2009 14:34
[Erledigt] Wie einzelne Optionen aus Drop Down Menü nicht ausführbar machen via If An	badboygoofy	JavaScript, Ajax und mehr	4	22.07.2009 13:56
Problem mit Drop Down Menü	N@tur3	PHP Tipps 2009	8	12.06.2009 18:22
[Erledigt] Mehrere Fragen zum drop down menu		HTML, Usability und Barrierefreiheit	2	29.11.2004 23:59
[Erledigt] Mehrere Fragen zum drop down menu		PHP Tipps 2004-2	1	28.11.2004 19:24
drop down menu		Datenbanken	3	24.09.2004 16:39
[Erledigt] drop down menü werte weitergeben		PHP Tipps 2004	3	24.08.2004 15:08

22.04.2011, 15:57
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	[Erledigt] CSS Drop Down Menu mit Zend Framework Servus, ich versuche mich gerade in Zend einzuarbeiten. Derzeit spiele ich mit der Navigation rum aber finde keine andere Möglichkeit außer einer unsortierten Liste als Anzeige des Menüs. Ich welcher Richtung muss ich suchen, wenn ich so etwas erstellen möchte. Habe mir jetzt auch schon einige Tutorials gegoogelt aber es war nix brauchbares dabei. Nutze Zend Version 1.11.5 Wäre für einen Schubs in die richtige Richtung dankbar.


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

22.04.2011, 19:00
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Gibt also keine Layoutmöglichkeit innerhalb von Zend in der man sagen kann, dass man gerne ein horizontales Menu haben möchte. Also muss ich an CSS ran und das entsprechend definieren. Mal ein weiterführende Frage. Ich habe jetzt schon mehrere Tutorials gesehen in denen das Menu entweder per XML oder über ein Array definiert wird. Welche der beiden Methoden eignet sich denn eher, wenn man auf Basis einer ACL zusätzliche Menüpunkte erweitern will. Ich habe gesehen, dass es Methoden gibt um das Menü um entsprechende Menüpunkte zu erweitern habe dies aber nur in Verbindung mit der Array Variante gesehen. Ist das Erweitern auch mit einer XML Konfiguration möglich ?

22.04.2011, 20:04
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Ich habe jetzt ein bisschen probiert und habe die erste Ebene des Menüs Horizontal dummerweise auch alle Unterpunkt. Ist ein verschachteltes Menü über mehrere Ebenen. In den Tutorials die ich jetzt zum Thema CSS und Horizontale verschachtelte Menü gelesen habe kommt es immer wieder vor, das dem UL oder LI Element eine ID oder eine Style Class verpasst wird und auf dieser Basis per CSS definiert wird. Leider habe ich noch keine Möglichkeit gefunden wie ich diesen Elementen eine ID oder eine CSS Class zuweisen kann. Wenn ich in meiner XML eine CLASS Definition angebe wird dieser nur auf das Link Element angewendet. Navi.xml PHP-Code: <?xml version="1.0" encoding="UTF-8"?> <config> <nav> <page1> <id>mainmenu1</id> <class>Test</class> <label>Seite 1</label> <uri>page1</uri> <pages> <page1_1> <label>Seite 1.1</label> <uri>page1/page1_1</uri> </page1_1> </pages> </page1> Ergebnis: PHP-Code: `<ul class="navigation"> <li class="active"> <a href="/">Home</a> </li> <li> <a id="menu-mainmenu1" class="Test" href="page1">Seite 1</a> <ul> <li> <a href="page1/page1_1">Seite 1.1</a> </li> </ul> </li>` Wie bekomme ich also eine ID oder eine CLASS in die LI oder UL Elemente mit Zend Mitteln, sofern das geht ?

22.04.2011, 20:39
MLang Benutzer Registriert seit: 25.02.2011 Beiträge: 42 PHP-Kenntnisse: Fortgeschritten	Erstmal danke für die bisherige Hilfe und ... ich glaube ich habe das gefunden was ich brauche. Das Stichwort von dir hat mich auf die folgende Seite gebracht: http://de.selfhtml.org/css/layouts/n...ten.htm#modern. Jetzt habe ich zumindest mal die Kindebenen unter den Elternebenen. Nur bin ich jetzt am grübeln wie ich die 3 Ebene (KindKind ... Enkel ach keine Ahnung) also die dritte Ebene wieder seitlich rausgehen lass also wieder Vertikal. EDIT: Lösung gefunden danke für die Denk- und Suchhilfen: So sieht der Code aus: PHP-Code: @CHARSET "ISO-8859-1"; html, body, div, span, ol, ul, li{ border: 0; margin: 0; padding: 0; vertical-align: baseline; } .clear{clear:both;} #menu { /* the menu container / background: #000; width: 325px; font-size: 13px; } #menu ul { / menu ul style / list-style: none; margin: 0; } #menu li { / horizontal menu / float: left; position: relative; } #menu a { / the link style of menu / color: #aaa; display: block; line-height: 38px; padding: 0 10px; text-decoration: none; border-right:1px solid #666; } / The sub menu is hidden by default and its position is places right under the parent menu/ #menu ul ul { display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; } / This block of CSS is to deal with the sub-menu (nested menu). The CSS defines how the sub-menu and sub sub menu must be shown and positioned. / / The sub menu list element is given a minimum width / #menu ul ul li { min-width: 180px; } / the third level menu (sub sub menu) is placed to the left side of its parent/ #menu ul ul ul { left: 100%; top: 0; } #menu ul ul a { background: #333; line-height: 1em; padding: 10px; width: 160px; height: auto; } #menu li:hover > a, #menu ul ul :hover > a { background: #333; color: #fff; } #menu ul li:hover > ul { display: block; } #menu ul li:hover > ul { display: block; } / The following part defines how and when the sub menu must be hidden and shown. The sub menu is shown when mouse over and hidden when the mouse leaves. / / Styles the anchor (a) tag when mouse over / #menu li:hover > a, #menu ul ul :hover > a { background: #333; color: #fff; } gefunden auf: http://www.blokeish.com/2011/03/hori...ut-javascript/ Ich will mich ja nicht mit fremden Federn schmücken aber auf der Basis kann ich weiter experimentieren. Geändert von MLang (22.04.2011 um 20:54 Uhr).*