*GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

mörml · 21. März 2011 02:51

Hallo ihr Lieben,

ich wünsche mir ein vertikales Menü exakt wie dieses hier: vertikales CSS-Menü

oder dieses: Stu Nicholls

Nur: wie anpassen? Beide funktionieren nicht, jedenfalls nicht bei mir.

Ein einfaches vertikales Menü habe ich hinbekommen, indem ich in mein Template eingefügt habe:

<div id="menu">
{menu template="accessible_cssmenu.tpl"}
</div>

Das CSS lautet:

#menu ul {
list-style:none;
position:absolute;
top:100px;
left:100px;
z-index: 9999;
}

#menu ul li {
margin: 0px;
padding: 0px;

}

#menu ul li ul {
list-style:none;
visibility:hidden;
}

#menu ul li a {
color:#fff;
display:block;
font-size:1em;
font-weight:bold;
height:auto;
padding:10px;
width:auto;
}

#menu ul li a:hover {
background:#b484da;
color:#000;
text-decoration:none;
}

#menu li.iehover {
z-index: 1000; /* IE z-index bugfix */
}

Ich weiß jedoch weder, wie ich das obige CSS anpassen muss, um ein untergliedertes Menü zu zaubern, noch, warum das CSS der verlinkten Website nicht funktioniert.

Weitere Frage: Ich würde dieses vertikale Menü gerne in 2 Menüs teilen bzw. die Navigation so anordnen, dass 6 Links links stehen und weitere 6 Links daneben. Nur - wie sage ich es meinem CSS?

Mein Englisch ist nicht das Beste, und alles, was ich bis jetzt gelesen habe, hilft mir nicht weiter.

Vielleicht hat jemand einen rettenden Tipp für mich.

Meine CMSMS-Version ist die akutellste.

VG mörml

Beitrag geändert von mörml (22. März 2011 22:02)

Andynium · 21. März 2011 09:47

mörml schrieb:

ich wünsche mir ein vertikales Menü exakt wie dieses hier: vertikales CSS-Menü

Hast du mal die Sourcen inspiziert wink ?

Ist eigentlich relativ einfach

http://www.flugbild-per-hochstativ.de/i … -menu-test

Was hab ich da gemacht:

Die Datei nav-v.css in ein CMSMS-eigenes Stylesheet eingefügt.
Das Stylesheet dem Template zugeordnet.

Im im head-Bereich des Templates den jquery-Aufruf eingefügt

Hier klicken, um den Code zum Kopieren zu markieren

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Das "accessible_cssmenu.tpl" im MenüManager dupliziert (in ein Datenbank-Template überführt).
im neuen Menu-template
Hier klicken, um den Code zum Kopieren zu markieren
```
<ul id="primary-nav">
```
durch
Hier klicken, um den Code zum Kopieren zu markieren
```
<ul id="navmenu-v">
```
ersetzt.
den neuen Menü-Aufruf im Template eingefügt.

Für die Menü-Teilung empfehle ich, dir die Parameter des Menü-Managers ansehen. So als kleinen Tipp solltest du das Menü in zwei Teile (Äste) splitten

1. Links
1.1 Links a
1.2 Links b
1.3 ...

2. Rechts
2.1 Rechts a
2.2 Rechts b
2.3 ...

Über die Parameter des MenüManagers kannst du dann jeweils den linken oder den rechten Zweig aufrufen.

mörml · 21. März 2011 14:06

Ach, Mensch, Cyberman - dein CSS-Hirn möcht' ich haben... ops
Hab vielen vielen vielen Dank. Das werde ich sofort ausprobieren. Fürchte aber, dass ich weitere Verständnisfragen stellen muss.
Bei Punkt 4 hab ich schon in der englischen Anleitung geschluckt...

Ich berichte!

Herzlichst
mörml

Andynium · 21. März 2011 14:44

Einfach nicht an Herzdrücken sterben wink ... für Fragen ist das Forum ja da.

mörml · 21. März 2011 16:17

*KREISCH* Es funtioniert!!!!!!
Allerherzlichsten Dank!

Und jetzt wage ich mich an die Teilung des Menüs.

Wie Recht du doch hast: 2 Stunden Ausprobieren können 10 Minuten Handbuchlesen ersparen...

Glückliche Grüße
mörml

P.S.: Liege ich richtig, dass ich auf diesem von dir beschriebenen Wege auch die Stu Nicholls-Menüs einbauen kann?

Beitrag geändert von mörml (21. März 2011 16:18)

Andynium · 21. März 2011 16:22

Yep.

Unter dem Strich müssen nur die CSS-ID's überein stimmen und passenden Javascripte eingebunden werden - damit kannst du so ziemlich jedes Menü erzeugen, was da kreucht und fleucht wink .

mörml · 21. März 2011 18:17

Was die zwei nebeneinander stehenden Menüs angeht, stoße ich schon wieder an meine Grenzen.

Folgende Gedanken habe ich mir dazu gemacht:

1. Im Haupttemplate zwei Divs einfügen für zwei Navigationsbereiche.

2. Das Navi-CSS entsprechend der zwei Divs anpassen.

3. Den Parameter "start_element" im Menümanager-Template verwenden (wie auch immer).

Funktionieren tut's natürlich nicht.

VG mörml

NaN · 21. März 2011 18:50

Was bedeutet "Du hast Dir Gedanken gemacht"?
Wie kann rein durch "sich Gedanken machen" bereits das Ergebnis "Funktionieren tut's natürlich nicht" zustandekommen?

Die Aussage, "dass etwas nicht funktioniert", reicht leider nicht.
Es wäre für uns alle etwas leichter, Dir zu helfen, wenn Du uns die Seite zeigen könntest.

Was genau bedeutet

3. Den Parameter "start_element" im Menümanager-Template verwenden (wie auch immer).

Der Parameter "start_element" hat im Menümanager-Template nichts verloren.
Und wie genau darf ich mir "(wie auch immer)" vorstellen?
Wie auch immer es gewesen sein mag, es wäre hilfreich, es zu wissen.

Der Parameter gehört schonmal ins Seitentemlpate beim Aufruf des Menüs.
(z.B. {menu start_element=1.1 show_root_siblings=1})
Welchen Wert hast Du verwendet?
Wie sieht die Seitenhierarchie überhaupt aus?

mörml · 21. März 2011 21:46

Hallo NaN,

ganz locker bleiben.

Folgende Gedanken habe ich mir dazu gemacht:
1. Im Haupttemplate zwei Divs einfügen für zwei Navigationsbereiche.
2. Das Navi-CSS entsprechend der zwei Divs anpassen.
3. Den Parameter "start_element" im Menümanager-Template verwenden (wie auch immer).
Funktionieren tut's natürlich nicht.

Da ich Punkt 3 nicht zu lösen vermag (ich habe keine Ahnung, was ich mit diesem Parameter machen soll), funktionieren Punkt 1 und 2 nicht, schon mal gar nicht, da ich Anfänger bin.
Nicht funktioneren bedeutet, dass ich kein Ergebnis sehe, um genau zu sein, das Einfügen von 2 Divs im Haupttemplate führt zu keinerlei Anzeige in Bezug auf das gewünschte Ergebnis. Es bleibt bei einer Navigation. Die Modulhilfe führt mich nicht weiter.

Das Lesen des Quellcodes vergleichbarer Navigationen (habe im Übrigen nur hier ein Beispiel gefunden), erhellt mich leider ebenfalls nicht, da ich nicht weiß, was ich dem Menütemplate sagen soll.

Die Website, um die es geht, findest du hier.

VG mörml

mörml · 21. März 2011 22:48

So, jetzt hab ich zumindet 2 Navigationsmenüs nebeneinander.

Der Befehl

{menu start_element=7 show_root_siblings=1 number_of_levels=3}

funktioniert aber nicht, die Menüs bleiben "doppelt" stehen, also keine Anzeige von Menüpunkt Nr. 7 ff. im zweiten Menü.

Mein Haupttemplate sieht so aus:

<div id="navmenu-v2">
{menu}
{menu start_element=7 show_root_siblings=1 number_of_levels=3}
<ul id="navmenu-v2"></ul>
</div>

VG mörml

NACHTRAG: Es liegt am "show_root_siblings=1". Sobald ich diesen Teil weglasse, wird zumindest Menüpunkt Nr. 7 angezeigt.

Beitrag geändert von mörml (22. März 2011 23:22)

NaN · 22. März 2011 23:20

mörml schrieb:

ganz locker bleiben.

Keine Sorge smile

Also gut, damit kann man doch schon mehr anfangen.
Hab erstmal nur kurz drübergeschaut, aber hier schonmal die ersten Fehler:

Punkt 1:

Da sind so viele Markup-Fehler, das kann kein Browser richtig darstellen.
Der TinyMCE scheint bei Dir kompletten HTML Code zu generieren (Also <html><body> usw.).
Dadurch ist die Seite in sich sozusagen doppelt und dreifach definiert.
Das full-page Plugin des Tiny muss dazu deaktiviert werden. (hat nichts mit Vollbild zu tun wink )
Schau dazu mal in die Einstellungen des TinyMCE (Erweiterungen->TinyMCE Tab: Erweiterungen)

Punkt 2:

Das Wesen einer ID ist es, einmalig zu sein.
Du kannst nicht "navmenu-v" als ID sowohl für das <div> im Haupt-Template als auch für die Listen (<ul>) des Menüs im Menü-Template verwenden. Sonst klappt die CSS Formatierung natürlich nicht.
Da die Listen (<ul>) mitunter mehrfach vorkommen können (Untermenüs, ein zweites Menü mit selben Menüt-Template ... ), würde ich dort mit Klassen arbeiten. Dann vermeidet man diese Dopplung.

Punkt 3:

Wozu setzt Du diese leeren <ul>'s unter das {menu} ?
Das macht keinen Sinn.

Behebe das erstmal. Dann schauen wir weiter.
Bis dahin noch eine geruhsame Nacht.

mörml · 22. März 2011 23:37

Hallo NaN,

uuiii, das war schnell, danke!

Zu Punkt 1:

Uh! Plugin "fullpage" habe ich nun deaktiviert. Woran hast du dieses Doppelgemoppel denn erkannt (ich weiß, Anfängerfrage)? Muss/kann ich nun noch etwas säubern?
Die Seiten wollte ich sowie "aufräumen", weil sie sowohl vom CSS formatiert werden als auch nochmals (unnötig) per WYSIWYG. Kann das auch daran liegen?

Zu Punkt 2:

Kann ich nicht einfach auch die Div-Id umbenennen? (wahrscheinlich wieder eine ziemlich dämliche Frage)

Zu Punkt 3:

Leere <ul> ? Wo hast du die denn entdeckt? Ich sehe keine leeren, nicht mit Firebug und auch nicht im Template.

VG mörml

NaN · 22. März 2011 23:43

mörml schrieb:

Woran hast du dieses Doppelgemoppel denn erkannt (ich weiß, Anfängerfrage)?

Einfach mal den HTML Quelltext anzeigen lassen.
Firebug zeigt nur den vom Browser "bereinigten" Quellcode an.
Also so, wie ihn der Browser interpretiert.
Markup-Fehler wirst Du da nicht finden.

mörml schrieb:

Kann ich nicht einfach auch die Div-Id umbenennen? (wahrscheinlich wieder eine ziemlich dämliche Frage)

Nein. Denk daran, dass die <ul>s mehrfach vorkommen.
Du willst doch zwei Menüs.
Außerdem gibt es auch noch Untermenüs.
Die würden sonst die gleiche ID bekommen.

mörml schrieb:

Leere <ul> ? Wo hast du die denn entdeckt? Ich sehe keine leeren, nicht mit Firebug und auch nicht im Template.

In Deinem vorletzten Posting wink

mörml · 22. März 2011 23:58

Ah! Das wusste ich nicht, dass der Firebug nicht alles anzeigt.

Okee, das mit den Divs schau ich mir nun genau an und vergleiche noch mal mit sauberen Programmierungen.

Zu den <ul>s: Du meinst das hier, ja?

<ul id="navmenu-v"></ul>

Das hab ich mir von der Seite http://qrayg.com/learn/code/cssmenus/ abgeschaut.

VG + angenehme Träume
mörml

NaN · 22. März 2011 01:38

Genau die meine ich.
Aber auf der Demo-Seite kann ich sowas nicht finden.
Einer von uns beiden hat da grad Tomaten auf den Augen.
Könnte an der Uhrzeit liegen.

Das Prinzip ist folgendes:

Du brauchst eine Liste mit einer bestimmten ID, damit diese anhand der ID entspechend formatiert werden kann. Die Liste wird Dir mit dem {menu} generiert. Im Haupt-Template selbst brauchst Du also keine Liste.

Das von Dir verlinkte Beispiel ist aber nicht für mehrere Menüs gedacht.
Du müsstest im Prinzip jedes Menü in ein <div> mit einer eignen ID packen.
So wie Du es im Grunde ja schon gemacht hast.
Die <ul>s brauchen keine ID (die <ul> ID nimmst Du stattdessen für die <div>s in denen sich die Menüs befinden).

Dann musst Du nur noch das CSS so anpassen, dass nicht ul#navmenu-v formatiert wird, sondern #navmenu-v ul ... bzw. #navmenu-v2 ul ... (also keine Liste mit der ID soundso, sondern irgendein Element mit der ID soundso dem eine Liste folgt ... )
Sonst müsstest Du für jedes Menü ein eigenes Template erstellen bei dem das erste <ul> eine eigene ID bekommt. Da die Menüs aber gleich aufgebaut sind, halte ich das für unnötig und würde daher eher das CSS umschreiben. Dann kannst Du ein und dasselbe Menü-Template flexibel einsetzen und brauchst es nur in eine <div> mit einer entsprechenden ID zu packen.

mörml · 22. März 2011 01:59

Wow, danke NaN.

Ich würde es ja gerne mal vom Grundsatz her kapieren, gibt es ein Buch, das HTML + CSS erklärt, aber für 4-Jährige geschrieben ist?

Habe mein Haupttemplate also nun wie folgt angepasst:

<div id="navigation2">
{menu}
{menu start_element="7" show_root_siblings="1" number_of_levels="3"}
</div>

und werde anschließend das Navi-CSS umschreiben, wie du vorgeschlagen hast.

VG mörml

Beitrag geändert von mörml (22. März 2011 02:00)

NaN · 22. März 2011 02:10

Nichts zu danken.

Bücher? Hm, die von O'Reilly sollen ganz brauchbar sein.
Ansonsten haben wir hier mal versucht eine Liste von Tutorials und Beispielen zusammenzustellen:

http://www.cmsmadesimple.de/forum/viewtopic.php?id=16
(Original-Thema war hier: http://forum.cmsmadesimple.org/viewtopi … 2&start=0)

mörml · 22. März 2011 02:13

Danke für den Lesetipp!

Das Menü selbst ist jetzt total verballert. :--/
Ich glaube, ich überlege mir eine andere Lösung für die Navigation...

NaN · 22. März 2011 02:17

Schau genau hin: im CSS wird #navmenu-v ul verwendet, aber im Template steht <div id="navigation1"> <ul id="navmenu-v"> ...

Nimm die ID aus den <ul>s und verwende sie für die <div>s.

mörml · 22. März 2011 02:26

Ja, ich Depp! Hab's schon umgeschrieben. Verdammte Uhrzeit...

NaN · 22. März 2011 02:33

Und ich schreibe es sicherheitshalber nochmal: Nimm die IDs aus den Listen raus. (die stehen vermutlich im Menü-Template).
Sonst kannst Du nur eins von zwei Menüs formatieren.

mörml · 22. März 2011 02:40

Aber zerschieß ich mir damit nicht das Navi-CSS? Siehe Cybermans angepasstes Menü?

NACHTRAG: Yep, es zerschießt mir dann mein Menü.

Beitrag geändert von mörml (22. März 2011 02:45)

NaN · 22. März 2011 02:54

Also wenn ich im Firebug mal die IDs bei den Listen rausnehme sehe ich da immer noch zwei Menüs nebeneinander. Und die funktionieren prima.

mörml · 22. März 2011 03:11

Meine funktionieren auch jetzt (warum auch immer!), wenn auch über einen Notnagel:

<div id="navmenu-v1">
{menu items=link1,link2,link3}
</div>

<div id="navmenu-v2">
{menu items=link4,link5,link6}
</div>

Vermutlich nicht die eleganteste Lösung, funktioniert aber. Jetzt muss ich nur noch herausfinden, wie ich die Untermenüs ausgeklappt kriege.

Damit wir nicht aneinander vorbeireden: Ich hatte im Menü-Template die Zeile

gelöscht, dann hatte es mir das Format zerrissen.

NaN · 22. März 2011 03:12

Achso. Nicht die komplette Zeile löschen. Ich meinte nur das id="..."

Forum für CMS/made simple

#1 21. März 2011 02:51

*GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#2 21. März 2011 09:47

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#3 21. März 2011 14:06

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#4 21. März 2011 14:44

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#5 21. März 2011 16:17

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#6 21. März 2011 16:22

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#7 21. März 2011 18:17

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#8 21. März 2011 18:50

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#9 21. März 2011 21:46

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#10 21. März 2011 22:48

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#11 22. März 2011 23:20

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#12 22. März 2011 23:37

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#13 22. März 2011 23:43

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#14 22. März 2011 23:58

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#15 22. März 2011 01:38

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#16 22. März 2011 01:59

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#17 22. März 2011 02:10

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#18 22. März 2011 02:13

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#19 22. März 2011 02:17

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#20 22. März 2011 02:26

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#21 22. März 2011 02:33

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#22 22. März 2011 02:40

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#23 22. März 2011 02:54

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#24 22. März 2011 03:11

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

#25 22. März 2011 03:12

Re: *GELÖST* zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Fußzeile des Forums

GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs

Re: GELÖST zwei vertikale Navigationsmenüs nebeneinander mit Untermenüs