Dropdown Menü erste Ebene nur bei Seitenbesuch highlighten

Hallo liebe Forum-Gemeinde

Ich habe ein Dropdown Menü Ebene 1 und Ebene 2. Die Ebene 1 enthält auch Seiten und wenn ich eine davon besuche sollte der Button färbig unterlegt sein. Wenn ein Seite aus Ebene 2 angezeigt wird sollte er wieder neutral sein.

Irgenwie bekomme ich das nicht hin, das der Button aus Ebene 1 nur bei angezeigter Seite unterlegt ist.

Aufbau im Menübaum:

Ebene1 -> Seite hat Inhalte
-Ebene2
-Ebene2

### Menü ###
lib.mainMenu = HMENU
lib.mainMenu {
    ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul>|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
      ACT.wrapItemAndSub = <li class="act">|</li>
    }
    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul>|</ul>
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
      ACT.wrapItemAndSub = <li class="act">|</li>
    }
}

* CSS Document */

.menu {
	width:955px;
}
/* remove all the bullets, borders and padding from the default list styling */ 
.menu ul { padding:0; margin:0; list-style-type:none; } 

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
	width: 190px;
}
/* style the links for the top level */ 
.menu a {
	display:block;
	font-size:13px;
	text-decoration:none;
	width:185px;
	height:20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	margin-left: 3px;
	margin-right: 3px;
	background-color: #000000;
	line-height: 20px;
	font-weight: bold;
}



/* background ebene 1 bei aktive */
.menu ul li.act a {
	background-color: #ff3300;
}

/* background bei eben 2 aktive */
.menu ul ul li.act a {
	background-color: #d9166e;
}

/* bei act einblenden */
.menu ul li.act ul {
	visibility:visible;
}

/* bei mouse over visble */
.menu ul li:hover ul {
	visibility:visible;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul{
	visibility:hidden;
	height:0;
	top:30px;
	left:0;
	right: 5px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	background-color:#000000;
	color:#FFFFFF;
	height:auto;
	line-height:20px;
	width:185px;
	margin-top: 1px;
	margin-right: 0px;
}

/* highlight */
.menu ul ul li a:hover, .menu ul li a:hover  {
	background-color: #d9166e;
}

<div class="menu">
  <ul>
    <li class="act"><a href="index.php?id=5" onfocus="blurLink(this);">Ebene 1</a>
      <ul>
        <li><a href="index.php?id=9" onfocus="blurLink(this);">Ebene 2.0</a></li>
        <li class="act"><a href="index.php?id=8" onfocus="blurLink(this);">Ebene 2.1</a></li>
      </ul>
    </li>
  </ul>
</div>

Dafür gibts den CUR Zustand. Der tritt nur genau dann ein, wenn die Seite aktiv ist, während ACT auch eintritt, wenn eine Unterseite aktiv ist.

Hallo

Vielleicht ist meine Frage nicht richtig verstanden worden:

So sieht es aus wenn die Seite der Ebene 1 angezeigt wird (ist auch OK)

Menüpunkt1 Ebene1 , Menüpunkt2 Ebene1, Menüpunkt3 Ebene1
Menüpunkt1 Ebene2
Menüpunkt2 Ebene2
Menüpunkt3 Ebene2

Wenn allerdings die Seite Menüpunkt 2 der Ebene 2 angezeigt wird sieht es so aus (das Highlight vom Menüpunkt 1 Ebene1 gehört weg!):

Menüpunkt1 Ebene1 , Menüpunkt2 Ebene1, Menüpunkt3 Ebene1
Menüpunkt1 Ebene2
Menüpunkt2 Ebene2
Menüpunkt3 Ebene2

das heisst es sollte so aussehen:

Menüpunkt1 Ebene1 , Menüpunkt2 Ebene1, Menüpunkt3 Ebene1
Menüpunkt1 Ebene2
Menüpunkt2 Ebene2
Menüpunkt3 Ebene2

Ich brauche aber im Quellcode die class="act" da sonst das Untermenü verschwindet.

Wie muss das CSS bzw. das TS aussehen das bei aktiver Untermenü-Seite der Menüpunkt1 Ebene1 nicht fett ist?

lg Walter

Kitsunet schrieb

Dafür gibts den CUR Zustand. Der tritt nur genau dann ein, wenn die Seite aktiv ist, während ACT auch eintritt, wenn eine Unterseite aktiv ist.

und ich dachte dazu braucht man ACTIFSUB?

@just2b, ACTIFSUB tritt ein, wenn die aktuelle oder eine Unterseite aktiv ist und die aktuelle Seite Unterseiten hat, ist also im Prinzip etwas spezieller. Also ich habe zumindest ACT und CUR immer so eingesetzt wie beschrieben und das hat das gewünschte Ergebnis erbracht.

@opaque,
du bist ja lustig... Wenn du die class act brauchst damit dein Untermenü aufgeklappt bleibt, dann musst du halt die Formatierung in einer anderen Class machen, z.b. cur.

Dann kannst du das vielleicht trennen. Du benötigst aber in jedem Fall CUR.

der TIP mit CUR hat die Sache gelöst

Ich habe nun im css eine class="hi" für das highlight und eine class="act" für das display: visible;

das TS sieht jetzt so aus und es funktioniert so wie ich wollte:

### Menü ###
lib.mainMenu = HMENU
lib.mainMenu {
    ### Erste Ebene ###
    1 = TMENU
    1 {
      noBlur = 1
      wrap = <ul>|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li>|</li>
      NO.ATagTitle.field = abstract // description // title
      ACT < .NO
      ACT = 1
      ACT.wrapItemAndSub = <li class="act">|</li>
      CUR < .ACT
      CUR.ATagParams = class="hi"
    }
    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul>|</ul>
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
      ACT.wrapItemAndSub = <li class="act">|</li>
    }
}

danke an alle
walter