[ERLEDIGT] Menü bei aktivem Element des Dropdowns ausgeklappt lassen
Hallo miteinander,
ich habe gerade folgende Situation: Ich habe eine horizontale Navigation in Joomla, beim Hover über einen Link wird ein Submenü ausgeklappt.
Wenn ein Link im Submenü angeklickt wird (und man sich dann auf der entsprechenden Seite befindet) bekommt der Link eine ID zugeteilt, nämlich #current.
(Hier ein Beispiel, dass ich eben noch gefunden habe: , jedoch ist das nicht mit Joomla sondern "manuellem" Code )
Ich hätte jetzt gerne, dass das Menü immer offen bleibt sobald im Submenü die ID #current zugeteilt wurde.
Hier mal mein CSS:
Aus Joomla wird folgender HTML-Code generiert:
Ich habe bisher folgendes versucht, jedoch vollkommen ohne Wirkung :
Wäre nett wenn mir jemand weiterhelfen könnte.
Grüße Jan
Hallo miteinander,
ich habe gerade folgende Situation: Ich habe eine horizontale Navigation in Joomla, beim Hover über einen Link wird ein Submenü ausgeklappt.
Wenn ein Link im Submenü angeklickt wird (und man sich dann auf der entsprechenden Seite befindet) bekommt der Link eine ID zugeteilt, nämlich #current.
(Hier ein Beispiel, dass ich eben noch gefunden habe: , jedoch ist das nicht mit Joomla sondern "manuellem" Code )
Ich hätte jetzt gerne, dass das Menü immer offen bleibt sobald im Submenü die ID #current zugeteilt wurde.
Hier mal mein CSS:
Code:
#main_nav {
float:right;
margin-top:47px;
}
#main_nav .menu {
margin:0px;
list-style: none;
}
#main_nav .menu li{
float:left;
margin:13px;
}
#main_nav .menu #current {
background: url(../images/navi_head_active.jpg );
background-repeat:no-repeat;
background-position:bottom center;
font-weight:normal;
}
#main_nav .menu a {
display:block;
text-align:center;
padding: 1em;
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:11px;
background: url(../images/bg_navi_head.jpg);
background-repeat:no-repeat;
background-position:right;
}
#main_nav .menu a:hover {
color:#dedede;
background: url(../images/bg_header_aktiv.jpg);
background-repeat:no-repeat;
background-position:center bottom;
}
#main_nav .menu li{
position: relative;
}
/*SUB NAVIGATION */
#main_nav .menu ul{ /* Submenü ausblenden */
position:absolute;
right:9999px;
list-style: none;
width:800px;
}
#main_nav .menu li:hover ul{ /* Submenü einblenden */
right:0;
}
#main_nav .menu ul li{
float:right;
margin:0px;
padding:0px;
}
#main_nav .menu ul li a{
display:block;
margin:0px;
padding: 8px 12px 0 12px;
color:#333027;
background: #ffffff;
text-transform:none;
height:23px;
border-right:1px solid #efefef;
}
#main_nav .menu li ul #current {
right:0;
}
#main_nav .menu ul .item51 a,
#main_nav .menu ul .item51 a:hover{
background: #ffffff url(../images/bg_header_sub_left.jpg);
background-repeat:no-repeat;
background-position:left top;
}
#main_nav .menu ul .item48 a,
#main_nav .menu ul .item48 a:hover{
background: #ffffff url(../images/bg_header_sub_right.jpg);
background-repeat:no-repeat;
background-position:right top;
}
#main_nav .menu ul li a:hover{
background: #ffffff;
color:#4d6268;
}
#main_nav .menu ul #current{
background:#ffffff;
font-weight:bold;
}
HTML:
<div id="main_nav">
<div class="moduletable_main_nav">
<ul class="menu">
<li class="parent active item2"><a href="#"><span>Die Sendung</span></a>
<ul>
<li class="item48"><a href="#"><span>Informationen zur Sendereihe</span></a></li>
<li id="current" class="active item49"><a href="#"><span>Sendungsvorschau</span></a></li>
<li class="item50"><a href="#"><span>Sendungsarchiv</span></a></li>
<li class="item51"><a href="#"><span>Sendetermine</span></a></li>
</ul>
</li>
<li class="item3"><a href="#"><span>Item</span></a></li>
<li class="item4"><a href="#"><span>Item2</span></a></li>
<li class="item5"><a href="#"><span>Hörfunk</span></a></li>
</ul>
</div>
</div>
Code:
#main_nav .menu li ul #current {
right:0;
}
Code:
#main_nav .menu li ul #current {
right:0;
position:absolute;
}
Grüße Jan
Zuletzt bearbeitet: