zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Drop-Down Menü (Liste) mit 2 Ebenen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.05.2010, 08:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2010
Beiträge: 2
Christofer befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2010, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2010
Beiträge: 2
Christofer befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
drop down, horizontal, liste

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox gombi CSS 0 18.01.2010 15:34
CSS Drop Down Menü gachet CSS 9 08.11.2009 18:36
Drop down menü geht im IE 6 nicht silverblack CSS 3 10.06.2007 20:36
Fehler mit Drop Down Menü bei Überschreitung der Container Grenzen! webfabrik CSS 4 16.01.2007 01:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:00 Uhr.