Suche

[makrele]

Wie bekomme ich es hin das Unterpunkte im Menü (li ul li; li ul li ul li; li ul li ul li ul li) erst aufgeklappt werden wenn der übergeordnete Link angeklickt wird? Bekomme es einfach nicht hin.

Hier der CSS code:

Code Auswählen Erweitern

.sidemenu {
   border-bottom: 2px #ffffff solid;
   border-top: 2px #ffffff solid;
   list-style-type: none;
   margin: 1em 0;
   overflow: hidden;
   padding: 0;
   width: 100%;
}

.sidemenu a,
.sidemenu strong {
   background-color: #ffffff;
   border-bottom: 1px #eeeeee solid;
   color: #444444;
   display: block;
   padding: 3px 0px 3px 10%;
   text-decoration: none;
   width: 90%;
}

.sidemenu li {
   float: left;
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 100%;
}


.sidemenu li a {
   background: url("pluspunkt.png") 0px 0px no-repeat;
   background-color: #ffffff;
   color: #444444;
   padding-left: 10%;
   width: 90%;
}

.sidemenu li span {
   border-bottom: 1px #dddddd solid;
   display: block;
   font-weight: bold;
   padding: 3px 0px 3px 10%;
   width: 90%;
}

.sidemenu li a:focus,
.sidemenu li a:hover,
.sidemenu li a:active {
   background: url("pluspunkt.png") 0px -25px no-repeat;
   background-color: #ffffff;
   color: #0094ff;
}

.sidemenu li ul li a {
   background: url("pluspunkt.png") 10% 0px no-repeat;
   background-color: #f8f8f8;
   color: #666666;
}

.sidemenu li ul li a,
.sidemenu li ul li.current,
.sidemenu li ul li strong,
.sidemenu li ul li span {
   padding-left: 20%;
   width: 80%;
}

.sidemenu li ul li a:focus,
.sidemenu li ul li a:hover,
.sidemenu li ul li a:active {
   background: url("pluspunkt.png") 10% -25px no-repeat;
   background-color: #f8f8f8;
   color: #0094ff;
}

.sidemenu li ul li ul li a {
   background: url("pluspunkt.png") 20% 0px no-repeat;
   background-color: #fcfcfc;
   color: #888888;
}

.sidemenu li ul li ul li a,
.sidemenu li ul li ul li.current,
.sidemenu li ul li ul li strong,
.sidemenu li ul li ul li span {
   padding-left: 30%;
   width: 70%;
}

.sidemenu li ul li ul li a:focus,
.sidemenu li ul li ul li a:hover,
.sidemenu li ul li ul li a:active {
   background: url("pluspunkt.png") 20% -25px no-repeat;
   background-color: #fcfcfc;
   color: #0094ff;
}

.sidemenu li ul li ul li ul li a {
   background: url("pluspunkt.png") 30% 0px no-repeat;
   background-color: #ffffff;
   color: #aaaaaa;
}

.sidemenu li ul li ul li ul li a,
.sidemenu li ul li ul li ul li.current,
.sidemenu li ul li ul li ul li strong,
.sidemenu li ul li ul li ul li span {
   padding-left: 40%;
   width: 60%;
}

.sidemenu li ul li ul li ul li a:focus,
.sidemenu li ul li ul li ul li a:hover,
.sidemenu li ul li ul li ul li a:active {
   background: url("pluspunkt.png") 30% -25px no-repeat;
   background-color: #ffffff;
   color: #0094ff;
}

.sidemenu li.current,
.sidemenu li strong {
   background-color: #bbbcca;
   border-bottom: 1px #eeeeee solid;
   color: #ffffff;
   font-weight: bold;
   padding: 1px 0px 1px 10%;
   width: 90%;
}

.sidemenu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

Das Theme ist  das "YAML"-Theme.
Ich hoffe mir kann jemand auf die Sprünge helfen.

LG
makrele

[comedi]

Hallo makrele  ,

kannst du mal einen Link zu Seite geben?

[makrele]

Hallo makrele  ,

kannst du mal einen Link zu Seite geben?

Aber sicher.
Hier wird getestet

http://www.terra-freunde.eu/index.php

[comedi]

Hallo makrele,

hast du im Adminmenü => System => Menümanager => Einstellungen =>Dynamisches Auf-und Zuklappen der Menüpunkte ermöglichen ein Haken gesetzt?

[makrele]

Hallo makrele,

hast du im Adminmenü => System => Menümanager => Einstellungen =>Dynamisches Auf-und Zuklappen der Menüpunkte ermöglichen ein Haken gesetzt?

Super, die "Menüs verwalten" Funktion kannte ich noch garnicht!

Mein Ziel ist es das Menü so hin zu bekommen wie der obere HTML-Block bei MouseOver soll das Plus-Zeichen blau werden.

Nur wenn ich das mit der "Menüs verwalten" Funktion mache dann muß man ja auf die kleine Plus-Grafik klicken.

Ich möchte aber gerne das sich das Untermenü mit einem Klick auf den übergeordneten Link öffnet.

Vielleicht nen kleiner Tip? 

Den Haken habe ich gesetzt

[comedi]

Hallo makrele,

vielleicht verstehe ich dich falsch, aber wenn ich bei dir auf der Seite den Punkt: UNTERNEHMEN anklicke (, öffnet sich einmal die dort hinterlegte Seite Content 01 und die beiden Untermenüpunkte: Unsere Arbeitsweise - Unsere Ziesetzung. Das ist auch so i.O. Wenn du jetzt dort die Seite Content 01 nicht sehen willst musst du dazu einen anderes Untermenü anlegen und im Hauptmenu keinen Verweis angeben.

Falls es jetzt nur um den Style geht, schau einfach mal hier: http://www.pragmamx.org/Forum-topic-29179-topicseen.html.

Vielleicht hilft dir das weiter. 

[makrele]

THX, da werde ich mich heute N8 mal genauer mit beschäftigen 

Wenn ich mir das Menü im IE angucke dann verschieben sich die Links einen weiter nach unten und sind von Anfang an aufgeklappt.

[makrele]

Nachdem jetzt fast alles nach meinen Vprstellungen funktioniert habe ich noch ein paar abschließende Fragen.

1. Wie bekomme ich es hin das auch die anderen Plus-Zeichen bei "hover" in die Farbe blau wechseln?
Bei "collapsed:hover" und "expanded:hover" funktionierts schon.

Code Auswählen Erweitern

.mx-menu li span.collapsed:hover,
.mx-menu li span.expanded:hover {
   background-image: url(../../../images/menu/square/node.gif);
   cursor: pointer;
}

2. Bei der Darstellung im FireFox sind die Aktiven Links Fett geschrieben. Wie oder besser Wo kann ich das ändern?

Hier nochmal der ganze Code der mx-menu.css

Code Auswählen Erweitern

/**
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
* $Id: mx-menu.css,v 1.1 2009/04/18 19:22:48 tora60 Exp $
*/

div.mx-menu {
   border-bottom: 2px #ffffff solid;
   border-top: 2px #ffffff solid;
   list-style-type: none;
   margin: 1em 0;
   overflow: hidden;
   padding: 0;
   width: 100%;
}

.mx-menu * {
   border: none;
   font-size: 1em;
   list-style-image: none !important;
   list-style-type: none !important;
   margin: 0;
   padding: 0;
   text-align: left;
   text-decoration: none;
}

.mx-menu li {
   border-bottom: none;
   border-top: none;
   float: left;
   margin: 0;
   padding: 0;
   width: 100%;
}

.mx-menu li a {
   background-color: transparent;
   border: none;
   color: #444444;
   display: block;
   margin-left: 0;
   text-decoration: none;
   white-space: nowrap;
}

.mx-menu li a,
.mx-menu li span {
   height: 1.5em;
   line-height: 1.5em;
   padding-bottom: 3px;
   padding-top: 3px;
}

.mx-menu li a:hover {
   border: none;
   text-decoration: none;
}

.mx-menu li a:hover,
.mx-menu li div.hover,
.mx-menu li div:hover,
.mx-menu li div.current.hover a,
.mx-menu li div.current:hover a,
.mx-menu li div.current a:hover {
   color: #0094FF;
}

.mx-menu li div {
   border-bottom-color: #ebebeb;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-top: none;
   height: auto;
   line-height: 1.5em;
}

.mx-menu li div.current {
   background-color: #bbbcca;
   border-bottom: 1px solid #eeeeee;
   color: #444444;
   padding: 1px 0 1px 0;
}

.mx-menu li div.current a {
   background-color: #ffffff;
   color: #444444;

}

.mx-menu li div.current span {
   background-color: #ffffff;

}

.mx-menu li div.current,
.mx-menu li div.current.hover,
.mx-menu li div.current:hover {
   background-color: #ffffff;
   color: inherit;
}

.mx-menu li div.nolink span {
   background-position: 5px 55%;
   background-repeat: no-repeat;
   display: block;
   float: none;
   padding-left: 10%;
   width: auto;
}

.mx-menu li li {
   border-bottom: none;
   border-top: none;
}

.mx-menu li span {
   background-position: 5px 55%;
   background-repeat: no-repeat;
   display: block;
   float: left;
   width: 10%;
}

.mx-menu li span.collapsed {
   background-image: url(../../../images/menu/square/subnode_plus.gif);
   cursor: pointer;
}

.mx-menu li span.collapsed:hover,
.mx-menu li span.expanded:hover {
   background-image: url(../../../images/menu/square/node.gif);
   cursor: pointer;
}

.mx-menu li span.d {
   background-image: url(../../../images/menu/square/subnode.gif);
   cursor: auto;
}

.mx-menu li span.expanded {
   background-image: url(../../../images/menu/square/subnode_minus.gif);
   cursor: pointer;
}

.mx-menu li span:hover,
.mx-menu li a:focus,
.mx-menu li a:hover,
.mx-menu li a:active {
   text-decoration: none;
}

.mx-menu li ul {
   margin-left: 1.1em;
}

.mx-menu ul,
.mx-menu li {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.mx-menu ul.collapsed {
   display: none;
}

.mx-menu ul.expanded {
   display: block;
}


Danke schon mal für eure Hilfe 

LG
marc