XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontales Drop-Down Menü (Liste) mit 2 Ebenen (http://xhtmlforum.de/showthread.php?t=61123)

Christofer 12.05.2010 09:29

Horizontales Drop-Down Menü (Liste) mit 2 Ebenen
 
Guten Morgen!

Zuerst mal Hallo bin neu hier :) Ich bin Hobby-Webentwickler, da ich neben meinem Studium für Vereine und kleinere Unternehmen Webseiten auf Joomla-Basis entwickle.

Nun zu meinem Problem. Im aktuellen Projekt, versuche ich ein 2-stufiges (2 Ebenen) horizontales Drop-Down-Menü in Listenformat zu erstellen. Momentan bin ich schon ziemlich nahe dran, jedoch fehlen mir noch einige Kleinigkeiten.

Hier mal der Link zur Test-Seite:
Test-Seite

1. Überlagerung der Sub-Menü Punkte

Wie man sieht besteht das Menü aus 4 Hauptpunkten mit jeweils einigen Unterpunkten. Wenn nun ein Hauptpunkt aktiviert ist z.B. Förderung wird das Submenü (zweite Liste) dauerhaft eingeblendet. Fährt man nun (also hovert) über einen anderen Hauptmenü-Punkt verschwindet die aktuelle Subliste und die Subliste des jeweiligen Hauptmenü-Punkts wird angezeigt.

Das funktioniert seltsamerweise nur von links nach rechts. Das heißt wenn ich z.B. den Punkt "Zentrum" aktiviert habe und über die anderen Punkte fahre werden die Sublisten korrekt angezeigt. Umgekehrt ist es jedoch so, dass wenn z.B. der Punkt Initiative aktiviert ist, die Sublisten der anderen Punkte nicht angezeigt werden.

Ich habe schon die verschiedensten z-Index Einstellungen versucht einzubauen jedoch ohne Erfolg ... keine Ahnung woran dieser Fehler liegen kann.

2. "Stay-Hover" der Hauptmenü-Punkte

Desweitern habe ich ein kleines JS angelegt welches dafür sorgt, dass beim Laden der Seite der aktuell ausgewählte Menü-Punkt auf Hover gesetzt wird. So entsteht der Effekt, dass die beiden Listen grafisch miteinander verbunden sind.

Einen Teil dieses Scripts habe ich aus dem Internet, dabei wird einfach die aktuelle URL ausgelesen und mit dem jeweiligen Link im Menü verglichen und dann wird der jeweilige Link auf die Klasse "hover" gesetzt.

Nun stellt sich mir die Frage wie ich diesen Effekt realisieren soll, wenn z.B. ein Punkt in der Subliste, also quasi ein Sub-Bereich des Haupt-Punktes der vom logischen Aufbau zum selben Bereich gehört, angeklickt bzw. geöffnet wird. Auch in diesem Fall sollte der Hauptmenü-Punkt die Klasse "hover" erhalten.

Ich bin für jeden Tipp dankbar!!

Anbei noch die einzelnen Auszüge aus den Source-Codes

HTML:
HTML-Code:

<div id="menu" class="menu">
<ul>
<li id="li_1"><a id="a_1" href="index.php" title="zentrum"></a>
<div class="submenu">
<ul id="ul_sub1">
<li><a href="#">über uns</a></li>
<li><a href="#">AplusB</a></li>
<li><a href="#">gesellschafter</a></li>
<li><a href="#">partner</a></li>
<li><a href="#">team</a></li>
<li><a href="#">standorte</a></li>
</ul>
</div>
</li>
<li id="li_2"><a id="a_2" href="index.php?option=com_aicontactsafe&amp;view=message&amp;layout=message&amp;pf=1" title="förderung"></a>
<div class="submenu">
<ul id="ul_sub2">
<li><a href="#">zielgruppe</a></li>
<li><a href="#">aufnahme</a></li>
<li><a href="#">förderleistungen</a></li>
<li><a href="#">aus- und weiterbildung</a></li>
</ul>
</div>
</li>
<li id="li_3"><a id="a_3" href="index.php?option=com_user&amp;view=register" title="unternehmen"></a>
<div class="submenu">
<ul id="ul_sub3">
<li><a href="#">aktuelle unternehmen</a></li>
<li><a href="#">alumni</a></li>
</ul>
</div>
</li>
<li id="li_4"><a id="a_4" href="index.php?option=com_search&amp;view=search" title="initiative"></a>
<div class="submenu">
<ul id="ul_sub4">
<li><a href="#">BizKick</a></li>
<li><a href="#">build! entrepreneurship zertifikat </a></li>
<li><a href="#">ringveranstaltung „Erfolgreich selbständig weren“</a></li>
<li><a href="#">build! Ideenwettbewerb</a></li>
<li><a href="#">online gründungsberater</a></li>
</ul>
</div>
</li>
</ul>
</div>

CSS
Code:

/* Menu Modul */
.menu {font-family:Verdana, Arial, Helvetica, sans-serif; width:980px; height:50px; position:relative; margin:0; font-size:11px; margin:0 0 80px 0; background:#fff; position:relative; z-index:5;}
.menu ul {padding:0; margin:0; list-style-type: none;z-index:5;}

.menu li {display:block; width:240px; text-decoration:none; padding:0 0 0 5px; height:69px; line-height:69px; color:#000; z-index:5;}

.menu li a:hover {color:#fff;background:url(../images/menu/nav_hover.jpg) bottom left no-repeat; display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin-top:10px; margin-left:-5px;}

.menu ul li {float:left;width:240px;}
 
.menu ul li a {display:block; width:243px; text-decoration:none; padding:0px 0 0 0px; height:69px; line-height:85px; color:#000; font-size:16px;margin:0px 0 0 0 px;}

.menu ul li a:visited {display:block; width:243px; text-decoration:none; padding:0 0 0 0px; height:69px; line-height:85px; color:#000; font-size:16px;margin:0 0 0 0 px;}
 
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}
 
.menu ul li ul {visibility:hidden; position:absolute; top:71px; left:0;background:url(../images/menu/sub_nav.jpg) bottom center no-repeat;z-index:1;width:980px;}

.menu ul li ul li a {font-size:13px; margin-top:7px;width:150px;height:50px; line-height:50px;margin-top:-2px;}
.menu ul li ul li a:visited {font-size:13px;margin-top:7px;width:150px;height:50px; line-height:50px;margin-top:-2px;}
.menu li li {background:none; width:150px;height:50px; line-height:50px;}
.menu li li a:hover {background:none;width:150px;height:50px; line-height:50px;}
.menu li li a {background:none;width:150px;height:50px; line-height:50px;}
 
.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; width:980px;color:#000;}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:0px; }
 
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; color:#000;}
 
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {color:#2D85CC;font-size:13px;margin-top:7px; margin-left:0px;width:150px;height:50px; line-height:50px;margin-top:-2px;}
 
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {visibility:visible; color:#000;}
 
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {color:#000;}
 
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {color:#000; width:150px;}

.submenu {z-index:1;}

.hover {color:#fff;background:url(../images/menu/nav_hover.jpg) bottom left no-repeat; display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin:10px 0 0 -5px;}

#li_1 {background:url(../images/menu/nav_1.jpg) bottom right no-repeat;}
#li_2 {background:url(../images/menu/nav_2.jpg) bottom right no-repeat;}
#li_3 {background:url(../images/menu/nav_3.jpg) bottom right no-repeat;}
#li_4 {background:url(../images/menu/nav_4.jpg) bottom right no-repeat;}

.a_1_hover{background:url(../images/menu/nav_hover_1.jpg) bottom right no-repeat;display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin-top:10px; margin-left:-5px;}
.a_2_hover{background:url(../images/menu/nav_hover_2.jpg) bottom right no-repeat;display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin-top:10px; margin-left:-5px;}
.a_3_hover{background:url(../images/menu/nav_hover_3.jpg) bottom right no-repeat;display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin-top:10px; margin-left:-5px;}
.a_4_hover{background:url(../images/menu/nav_hover_4.jpg) bottom right no-repeat;display:block; width:243px; text-decoration:none; padding:0 0 0 0; height:69px; line-height:69px; color:#000;z-index:5; position:absolute; margin-top:10px; margin-left:-5px;}

#a_1:hover{background:url(../images/menu/nav_hover_1.jpg) bottom right no-repeat;}
#a_2:hover{background:url(../images/menu/nav_hover_2.jpg) bottom right no-repeat;}
#a_3:hover{background:url(../images/menu/nav_hover_3.jpg) bottom right no-repeat;}
#a_4:hover{background:url(../images/menu/nav_hover_4.jpg) bottom right no-repeat;}

/* Menu Modul End */

JS
Code:

function stay_hover(id) {
//var pid = id.substring(3,4);
//document.getElementById(id).style.background="url(http://build.or.at.dd24810.kasserver.com/build/templates/build_template/images/menu/nav_hover_" + pid + ".jpg) bottom right no-repeat;"
var class = id+"_hover";
//document.getElementById(id).addClass("hover");
addClass(document.getElementById(id), class);
}

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}

function extractPageName(hrefString)
{
        var arr = hrefString.split('/');
        return  (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
 
function setActiveMenu(arr, crtPage)
{
        for (var i=0; i < arr.length; i++)
        {
                if(extractPageName(arr[i].href) == crtPage)
                {
                        if (arr[i].parentNode.tagName != "DIV")
                        {
                                //alert(i);
                                //arr[i].className = "hover";
                                //arr[i].parentNode.className = "hover";
                                switch (i) {
                            case 0: document.getElementById('ul_sub1').style.visibility='visible';
                                stay_hover("a_1");
                  break;
 
                            case 7: document.getElementById('ul_sub2').style.visibility='visible';
                                stay_hover("a_2");
                                //document.getElementById('ul_sub1').style.z-index='4';
                    break;
 
                            case 12: document.getElementById('ul_sub3').style.visibility='visible';
                                stay_hover("a_3");
                    break;
 
                            case 15: document.getElementById('ul_sub4').style.visibility='visible';
                                stay_hover("a_4");
                    break;
 
                                  //default: document.getElementById('ul_sub1').style.visibility='visible';
                                  }
                        }
                }
        }
}
 
function setPage()
{
        hrefString = document.location.href ? document.location.href : document.location;
 
        if (document.getElementById("menu") !=null )
        setActiveMenu(document.getElementById("menu").getElementsByTagName("a"), extractPageName(hrefString));
}

window.onload=function()
{
        setPage();
}

Ich würde mich auf Antworten freuen :)

lg Christofer

Christofer 19.05.2010 15:33

update:

punkt 1 konnte ich bereits lösen

auch bei punkt 2 gibt es fortschritte, auch bei den submenü einträgen, bleibt nun der hauptmenü-punkt gehovert

nur hab ich jz probleme wenn ein link geöffnet wird der nicht teil der haupt-navigation ist also z.b. in 2-subebene oder aus einem anderem menü z.b. footer etc.

wenn einer dieser links geöffnet wird, dann soll immer ein bestimmter menü-punkt auf hover gesetzt werden ... hätte da jemand vielleicht einen tipp?


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:29 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020