[GELÖST] Horizontales Menu - Submenuanzeige

simonson · 16. September 2012 12:01

Hallo Gemeinde,
habe in gut funktionierendes Menu mit Submenus,
allerdings mit 2 Macken:
1. wenn's eine 4. Ebene gibt, wird diese sofort angezeigt wenn man Ebene 2 hovert
2. ich kriege keine Pfeilsymbole in die jeweiligen parents (nach unten, nach rechts)
Weiss jemand wie's geht?

Dank vorab!

serialpark · 16. September 2012 12:03

zeig mal die seite, oder die betreffenden template/css teile

simonson · 16. September 2012 13:23

@serialpark
www.gross-pudel.at "Unsere Hunde" - viel Spass beim durchlesen, ist vielleicht auch vom Inhalt her interessant ;-)
Würde ja gerne die css-Datei hochladen - wenn ich wüsste wie :-(

Beitrag geändert von simonson (16. September 2012 13:29)

NaN · 16. September 2012 16:45

Uraltes Problem. Gleiche Lösung.
Das Beispielmenü ist erstmal nur für 3 Ebenen gemacht.
Schau einfach mal ins Stylesheet Deines Menüs.
Dort steht in Kommentaren was Du ändern musst, um es auch bei mehreren Ebenen verwenden zu können.

simonson · 16. September 2012 17:41

@NaN
Danke!
Gut versteckt - aber gefunden :-))
Eine Idee zu den "Pfeilchen"?
Oder zum Qellcode hochladen?

Beitrag geändert von simonson (16. September 2012 17:42)

NaN · 16. September 2012 17:51

Wo willst Du welchen Code hochladen?

simonson · 16. September 2012 17:54

Wenn jemand nach z.B. meinem stylesheet Fragen hat, dann erscheint bei den Wissenden ein schwarzes Fesnter mit dem Code - sozusagen "weiss auf schwarz" mit scrollbalken und Co.
Wie macht man das?

NaN · 16. September 2012 18:37

Der fünfte Button von rechts wink
Code hier einfügen, markieren, auf den Button klicken, Sprache ignorieren, fertig.

simonson · 16. September 2012 20:20

Danke - supereinfach! - wenn man's weiß ;-)

Doch noch 'ne Idee zu den "Pfeilchen"?

Beitrag geändert von simonson (16. September 2012 20:21)

mörml · 17. September 2012 22:25

Die Pfeile setzt du im CSS im entsprechenden "Container" als background-image - wenn du solche Pfeile meinst wie bspw. hier.

simonson · 17. September 2012 23:04

@mörml

Ich hab's mal so versucht:

/* Styling the appearance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
/* arrow for menuparents */
background-image: url(uploads/images/circle_left_blue.gif); background-position: right center; background-repeat: no-repeat;
}

aber da kommt nix.
Was meinst du mit container?

mörml · 17. September 2012 00:15

Füg mal in dein Navigations-CSS ein:

Hier klicken, um den Code zum Kopieren zu markieren

#primary-nav li li.menuparent a.menuparent span {
	background:  url("http://www.gross-pudel.at/__PR/uploads/ngrey/parent.png") no-repeat right center;
}

Edit: Das ist der korrekte Code aus dem Original-CSS, den ich bei dir nicht finden kann.

Beitrag geändert von mörml (17. September 2012 14:09)

mörml · 17. September 2012 00:20

...und lass die Seite unbedingt mal durch den Validome laufen.

simonson · 17. September 2012 01:51

Danke mörml - hat in den submenus wunderbar geklappt !!!!!!!!!!
Unbescheiden wie ich bin:
Gibt's auch ein Pfeilchen nach unten im 1. level?
Sorry, aber wenn ich einen Wissenden an der Angel habe, dann muss ich das nutzen ;-))
Herzlichen Dank für deine Hilfe!
Die Idee mit validome war auch gut und wichtig, Resultat war ein wenig kryptisch, aber da beiss' ich mich schon durch.

mörml · 17. September 2012 14:11

Wie stellst du dir das denn vor mit dem Pfeil nach unten? Wann soll der sichtbar sein?

simonson · 17. September 2012 17:56

Das Ziel wäre:
Level 1: keine weitereren Level vorhanden => kein Pfeil
ein weiterer Level vorhanden => Pfeil nach unten
Level 2: kein weiterer Level => kein Pfeil
ein weiterer Level vorhanden => Pfeil nach rechts
Level 3: kein weiterer Level => kein Pfeil
ein weiterer Level vorhanden => Pfeil nach rechts
.
.
sodass der user sieht, dass noch weitere Levels vorhanden sind, auch wenn er
NICHT hovert.
Ist wahrscheinlich eine ziemlich aufwändige Sache und ausgerechnet mir als
cms-Anfänger fällt so ein - eigentlich Unfug - ein ;-)

mörml · 17. September 2012 18:53

So?

Pfeil unten:

Hier klicken, um den Code zum Kopieren zu markieren

#primary-nav .menuparent a.menuparent span {
     background: url(/__PR/uploads/ngrey/active.png) no-repeat left center; 
}

Pfeil unten bei "Willkommen":

Hier klicken, um den Code zum Kopieren zu markieren

#primary-nav .menuactive a.menuactive span {
     background: url(/__PR/uploads/ngrey/active.png) no-repeat left center; 
}

mörml · 17. September 2012 19:04

Vergessen: Damit es schicker aussieht, würde ich zu den nach unten zeigenden Pfeilen ein padding-left reinnehmen, was weiß ich, 1.2em vielleicht, also

Pfeil unten:

Hier klicken, um den Code zum Kopieren zu markieren

#primary-nav .menuparent a.menuparent span {
     background: url(/__PR/uploads/ngrey/active.png) no-repeat left center;
     padding-left: 1.2em; 
}

...und bei "Willkommen" genauso.

Ob das insgesamt sauberer Code ist, da müssten die Profis was zu sagen.

simonson · 18. September 2012 22:59

Sensationell!!!!!!!!!!!!!!!
Genau das sind die Pfeilerchens nach unten!!
Vielen Daaaank!

mörml · 18. September 2012 00:29

Tausch mal dein komplettes CSS aus:

Hier klicken, um den Code zum Kopieren zu markieren

#menu_vert {
	margin: 0;
	padding: 0;
}

.clearb {
	clear: both;
}

#menuwrapper {
	background-color: #FFFFFF;
	height: 1%;
	margin: 0;
	padding: 0;
	width: auto;
}

ul#primary-nav, ul#primary-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul#primary-nav {
	padding: 0 0 0 10px;
}

ul#primary-nav ul {
	border: medium none;
	display: none;
	position: absolute;
	top: auto;
}

ul#primary-nav ul ul {
	left: 100%;
	margin-left: -1px;
	margin-top: 1px;
	top: 0;
}

ul#primary-nav li {
	border: medium none;
	float: left;
	margin: 0;
	padding: 0;
}

#primary-nav li li {
	float: none;
	margin-left: 0;
	margin-top: -1px;
	position: relative;
	width: 220px;
}

ul#primary-nav li a {
	color: #D2691E;
	display: block;
	font-size: 1em;
	font-weight: normal;
	padding: 3px 5px;
	text-decoration: none;
}

ul#primary-nav li a:hover {
	background-color: #FFFFFF;
	color: #CC6600;
	font-weight: bold;
}

ul#primary-nav li li a:hover {
	background-color: #FFFFFF;
	color: #CC6600;
}

ul#primary-nav li a.menuactive {
	color: #8B4513;
	font-weight: bold;
}

ul#primary-nav li a.menuactive:hover {
	color: #000000;
	font-weight: bold;
}

#primary-nav li li a.menuparent span {
	display: block;
}

#primary-nav .menuparent a.menuparent span {
	background: url(/__PR/uploads/ngrey/active.png) no-repeat left center;
	padding-left: 1.2em;
}

#primary-nav .menuactive a.menuactive span {
	background: url(/__PR/uploads/ngrey/active.png) no-repeat left center;
    padding-left: 1.2em;
}
#primary-nav li li.menuparent a.menuparent span {
	background:  url(/__PR/uploads/ngrey/parent.png) no-repeat right center;
}
ul#primary-nav li ul a {
    color: #CC6600;
    font-weight: normal;
    margin: 0;
    padding: 6px 3px 6px 15px;
    position: relative;
    text-align: left;
}
ul#primary-nav li ul {
    background: none repeat scroll 0 0 #F3F5F5;
    display: none;
    height: auto;
    margin: 0;
    opacity: 0.95;
    padding: 0;
    position: absolute;
    width: auto;
    z-index: 999;
}
ul#primary-nav li ul ul {
    opacity: 95;
}
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
    color: #000000;
}
#primary-nav li:hover ul ul ul, #primary-nav li.menuparenth ul ul ul, #primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
    display: none;
}
#primary-nav ul ul ul li:hover ul, #primary-nav ul ul ul li.menuparenth ul, #primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
    display: block;
}
#primary-nav li li {
    clear: both;
    float: left;
}
#primary-nav li li a {
    height: 1%;
}

Beitrag geändert von mörml (18. September 2012 01:04)

simonson · 18. September 2012 11:25

Das ist DIE ULTIMATIVE Lösung!!!!
Du solltest Dich "yoda" nennen!
Vielen Dank! Wo, wie lernt man das?

Das solltest Du der gesamten Gemeinde als fixes Thema zur Verfügung stellen!!!!!!!

Beitrag geändert von simonson (18. September 2012 11:27)

mörml · 18. September 2012 11:46

Das ist das Original-CSS, nur minimal abgeändert. Die Pfeile kannst du mittels Bildbearbeitungsprogramm ja noch farblich anpassen.

Der Validome kommt mit den kryptischen Umlauten in deiner Contentbeschreibung nicht zurecht. Vielleicht hilft es, UTF-8 zu verwenden statt iso-8859-1.

simonson · 18. September 2012 12:38

@mörml
Nochmals Danke!
Die Seite muss komplett überarbeitet werden, wie ich beim validieren herausgefunden habe.
Hänge z.Zt. in einem anderen Projekt fest - also müssen die Hundchen noch ein wenig warten ;-)

Forum für CMS/made simple

#1 16. September 2012 12:01

[GELÖST] Horizontales Menu - Submenuanzeige

#2 16. September 2012 12:03

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#3 16. September 2012 13:23

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#4 16. September 2012 16:45

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#5 16. September 2012 17:41

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#6 16. September 2012 17:51

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#7 16. September 2012 17:54

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#8 16. September 2012 18:37

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#9 16. September 2012 20:20

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#10 17. September 2012 22:25

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#11 17. September 2012 23:04

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#12 17. September 2012 00:15

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#13 17. September 2012 00:20

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#14 17. September 2012 01:51

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#15 17. September 2012 14:11

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#16 17. September 2012 17:56

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#17 17. September 2012 18:53

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#18 17. September 2012 19:04

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#19 18. September 2012 22:59

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#20 18. September 2012 00:29

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#21 18. September 2012 11:25

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#22 18. September 2012 11:46

Re: [GELÖST] Horizontales Menu - Submenuanzeige

#23 18. September 2012 12:38

Re: [GELÖST] Horizontales Menu - Submenuanzeige

Fußzeile des Forums