[webdesign] dynamische Navigation

confector · 29. März 2009

Hey,
das passt hier zwar nicht direckt zum Thema des Boards, aber ich denke hier erreiche ich nen breites "Publikum"

. Habe shcon in nem anderen Forum gefragt, da konnte mir allerdings niemand helfen..
Es geht um JS, PHP, CSS und HTML.

Ich will eine Navigation mit zwei Ebenen haben:
1-> zweite Ebene wird bei mouse hover ueber die erste Ebene eingeblendet (klappt, CSS)
1.1--> der Überpunkt der aktuell geoeffneten zweiten Ebene soll markiert bleiben bei mouse hover ueber eines punktes der zweiten Ebene (klappt, JS)
2-> Wenn ich einen Menuepunkt anklicke oeffnet sich eine neue Seite, der Menuepunkt und, wenn vorhanden, sein Elternmenuepunkt, soll markiert bleiben (klappt teilweise, PHP mit hinzufuegen einer class bei dem geoeffneten Element, allerdings wird wieder ausgeblendet sobald ich mit der Maus von dem Menuepunkt fahre..)
2.1---> wenn ich jetzt mit der Maus ueber einen anderen Menuepunkt fahre soll dieser neue Menuepunkt markiert werden, der alte aber nicht mehr (klappt manchmal, JS)
2.2---> wenn ich mit der Maus wieder wegfahre ohne den neuen anzuklicken soll der alte wieder markiert sein. (klappt nicht)

Bin echt am Ende mit meinen Nerven durch das ganze ausprobieren.
Die Navigation liegt in einem Layer und ist eine ganz normale UL mit der ID "navigationul". Die Unterpunkte werden aus einer MySQL Datenbank ausgelesen,
sind aber ganz normaler HTML Code. Das ganze kann dann ca. so ausehen:

Code:

<div id="navigation">
	<ul id="navigationul" class="max_navigation_count4">
		<li class="nav7 ">
			<a href="?page=1">Punkt 1
			<ul>
			</ul>
		</li>
		<li class="nav3 ">
			<a href="?page=2">Punkt 2</a>
			<ul>
				<li >
					<a href="?page=2&amp;sub=8">Punkt 2.2</a>
				</li>
				<li >
					<a href="?page=2&amp;sub=9">Punkt 2.3</a>
				</li>
				<li >
					<a href="?page=2&amp;sub=10">Punkt 2.4</a>
				</li>
			</ul>
		</li>
		<li class="nav3 active">
			<a href="?page=3">Punkt 3</a>
			<ul>
				<li >
					<a href="?page=3&amp;sub=5">Punkt 3.1</a>
				</li>
				<li >
					<a href="?page=3&amp;sub=6">Punkt 3.2</a>
				</li>
				<li >
					<a href="?page=3&amp;sub=7">Punkt 3.3</a>
				</li>
			</ul>
		</li>
		<li class="nav6 ">
			<a href="?page=4">Punkt 4</a>
			<ul>
			</ul>
		</li>
	</ul>
</div>

Der CSS Code dazu: (sind auch viele unwichtige Sachen drin. Aber damit ihr mal alles habt falls jemand sich wirklich damit beschaeftigen sollte um mir zu helfen

)

Code:

div#navigation { 
	width: 700px;
	position: relative;
    text-align: left;
}
div#navigation ul {
	width: 100%;
    margin: 0; padding: 0;
}
div#navigation ul li {
    list-style: none;
    float: left;
	height: 24px;
	line-height: 24px;
}
div#navigation ul.max_navigation_count1 li   { width: 100%; }
div#navigation ul.max_navigation_count2 li   { width: 50%; }
div#navigation ul.max_navigation_count3 li   { width: 33.33%; }
div#navigation ul.max_navigation_count4 li   { width: 25%; }
div#navigation ul.max_navigation_count5 li   { width: 20%; }
div#navigation ul.max_navigation_count6 li   { width: 16.66%;	}
div#navigation ul.max_navigation_count7 li   { width: 14.26%; }
div#navigation ul.max_navigation_count8 li   { width: 12.5%; }
div#navigation ul.max_navigation_count9 li   { width: 11.11%; }
div#navigation ul.max_navigation_count10 li { width: 10%; } 
/* die ganzen count teile sind fuer das probelm unwichtig, 
werden wegen der verschiedenen Breite der einzelnen Punkten bei unterschiedlicher Anzahl an Punkten in einer Zeile gebraucht. */
div#navigation ul li a {
	display: block;
	width: 100%; height: 100%;
}
div#navigation ul li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 24px; left: 0;
    display: none;  /* Unternavigation ausblenden */
}
div#navigation ul li a:hover, div#navigation ul li.active a {
	background-color: #71706e;
	color: #dfdc01;
}
div#navigation ul li.active ul li a {
	background-color: #FFFFFF;
	color: #71706e;
}
div#navigation ul li:hover ul, div#navigation ul li.active ul {
	display: block;
	background-color: #FFFFFF;
}
div#navigation ul li:hover ul { z-index: 10; }
div#navigation ul li ul li {
    float: left;
	height: 24px;
}
div#navigation ul li ul li a {
	display: block;
	width: 100%; height: 100%;
}
div#navigation ul li ul li a:hover, div#navigation ul li ul li.active a {
	background-color: #71706e;
	color: #dfdc01;
}
div#navigation ul li.nav1 ul li  { width: 100%; } div#navigation ul li.nav1 ul li a { text-align: center; }
div#navigation ul li.nav2 ul li  { width: 50%; }
div#navigation ul li.nav3 ul li  { width: 33.33%; }
div#navigation ul li.nav4 ul li  { width: 25%; }
div#navigation ul li.nav5 ul li  { width: 25%; }
div#navigation ul li.nav6 ul li  { width: 25%; }
div#navigation ul li.nav7 ul li  { width: 25%; }
div#navigation ul li.nav8 ul li  { width: 25%; }
div#navigation ul li.nav9 ul li  { width: 25%; } /* gleiche wie bei count, unwichtig. */

JS Code:

Code:

function hover() {
	var LI = document.getElementById("navigationul").firstChild; // ul/li	
	do {
		if (sucheUL(LI.firstChild)) {  // ul/li/a
			LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
		}
		LI = LI.nextSibling;
	}
	while(LI);
}

function sucheUL(UL) {
	do {
		if(UL) UL = UL.nextSibling; // ul/li/ul (a -> ul)
		if(UL && UL.nodeName == "UL") return UL;
	}
	while(UL);
	return false;
}
  
function einblenden() {
	var UL = sucheUL(this.firstChild); // ul/li/ul
	UL.style.display = "block"; // ul/li/ul
	this.getElementsByTagName('a')[0].style.backgroundColor = "#71706E"; // ul/li
	this.getElementsByTagName('a')[0].style.color = "#DFDC01"; // ul/li/a
	this.style.zIndex = "10"; // ul/li
}
function ausblenden() {
	sucheUL(this.firstChild).style.display = "none"; // ul/li/ul
	this.getElementsByTagName('a')[0].style.color = "#71706E"; // ul/li/a
	this.getElementsByTagName('a')[0].style.backgroundColor = "#FFFFFF"; // ul/li
	if(!preg_match("active", this.className)) { 
		this.style.zIndex = "10";
	} else {
		this.style.zIndex = "0";
	}
}
window.onload=hover;

Hoffe irgendwer hat Lust mir zu helfen. Ich komm echt nicht mehr weiter

confector · 1. April 2009

*push*
irgendwer irgendeine Idee?

Oder nen Link zu ner Seite wo etwas aenliches vorkommt? ...

Suche

[webdesign] dynamische Navigation

confector

Ensign

confector

Ensign

Ähnliche Themen