Antworten zum Thema „Menü bei aktivem Element des Dropdowns ausgeklappt lassen“

[jschuhma]

[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:

#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;
    }

Aus Joomla wird folgender HTML-Code generiert:

<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>

Ich habe bisher folgendes versucht, jedoch vollkommen ohne Wirkung :

#main_nav .menu li ul  #current {
    right:0;
    }

 #main_nav .menu li ul  #current {
   right:0;
position:absolute;
    }

Wäre nett wenn mir jemand weiterhelfen könnte.
Grüße Jan

 

[jschuhma]

AW: Menü bei aktivem Element des Dropdowns ausgeklappt lassen

ein kleines Stück bin ich weiter gekommen: Wenn ein Menüpunkt im Submenü aktiv ist, so bleibt das Submenü jetzt ausgeklappt

/*SUB NAVIGATION */         
#main_nav .menu ul{ /* Submenü ausblenden */
    position:absolute;
    right:9999px;
    }
    
    
#main_nav .menu li:hover ul { /* Submenü einblenden */
    right:0;
    width:800px;
    list-style: none;
    }    
    
#main_nav .menu .active ul { /* Submenü eingeblendet lassen wenn aktiv */
    right:0;
    width:800px;
    list-style: none;
    }

Das Problem ist jetzt aber: Wenn man einen anderen Menüpunkt hovert, bleibt das aktive Submenü noch immer ausgeklappt und das Submenü das anderen Menüpunkts wird einfach darüber gelegt

Denke mein Fortschritt ist evtl garkeiner
Wäre für Tips dankbar.

Habe es hier nochmals im Testcase nachgebaut: http://tinyurl.com/3x2ayzx

Ein schönes WE noch,
Grüße Jan

 

[jschuhma]

AW: Menü bei aktivem Element des Dropdowns ausgeklappt lassen

so, schade, dass keiner eine Idee hat
Aber ich bin noch ein wenig weiter gekommen und poste es mal wieder:

im CSS folgendes ergänzt:

#main_nav ul:hover .active ul{  /* Aktives Submenü ausblenden wenn Hover über anderes */
        right:9999px;
        position:absolute;
    }
    
#main_nav ul .active ul:hover {
    right:0;
    }

#main_nav .menu .active:hover ul{ /* Aktives Submenü eingeblendet lassen wenn Hover auf sich selbst*/
    right:0;
    }

Soooo, jetzt hab ich es doch (nach 2 Tagen arbeiten am Menü ) funktionell alles hinbekommen :muede: ---> Thema erledigt.

Grüße Jan