Navigation Dropdown (farbig javascript?)

[MastaDaDesasta]

Hallo,
ich wollte auf meiner Webpage eine Navigation einbauen ähnlich wie auf dem vBulletin (Beispiel: www.clanforen.de ) da oben wenn man, auf einen Link klickt, erscheint drunter ein Menue, aus dem man auswählen kann, wohin man will... das ganze ist auch noch farbig... ist ein bisschen doof zu erklären... schaut euch die beispiel seite an und klickt mal auf Menü (rechts oben) ... dann seht ihr was ich meine... so was würde ich in möglichst einfachen code umsetzen... hat einer von euch eine Idee, wie das zu bewerkstelligen ist? (wenn möglich mit kleiner Erklärung, werde aus dem Quelltext des VBulletin nicht schlau!) Ist das in HTML zu realisieren? Wenn nicht wie geht das in Java Script - Sorry dann für das falsche Forum!


Gruss MastaDaDesasta

 

[Gottox]

das Dropdown an sich ist mit Javascript zu realisieren:

<select onchange="this.value=location.href">
<option value="URL">ABC</option>
</select>

Das farbige hingegen macht man mit CSS

<select onchange="this.value=location.href">
<option style="color:green;background:blue" value="URL">ABC</option>
</select>

Das Javascript nimmt einfach den Akuellen Wert aus dem Dropdown und öffnet den Wert als Link.

 

[MastaDaDesasta]

so wie ich das sehe, haben die das aber irgendwie mit tabellen als dropdown realisiert. Das wüsste ich gerne wie die das gemacht haben. Wenn man da drauf klickt, kommt eine Tabelle aus der Mann dann auswählen kann... Das wüsste ich gerne wie man das in "Rohform" machen kann... also auf klick eine Tabelle erscheinen lassen sozusagen...

Hier ein Beispiel z.b. auf quick Links klicken.


Gruss MastaDaDesasta

 

[tholmer]

moin

Gottox: hab ich mal probiert den code aber nicht... wenn man dann in der dropdown liste was anklickt passier eigentlich so gut wie gar nix.

 

[Gottox]

ARGH... Ja du hast recht... Vercodet... Sorry

<select onchange="location.href=this.value">
<option style="color:green;background:blue" value="URL">ABC</option>
</select>

 

[MastaDaDesasta]

weiß nun jemand wie das im vBulletin mit den Tabellen gelöst ist, das sieht besser aus...

 

[Gottox]

<script>
function getLeft(elm)
	{
	var mOffsetLeft = elm.offsetLeft;
	var mOffsetParent = elm.offsetParent;

	while(mOffsetParent) {
		mOffsetLeft += mOffsetParent.offsetLeft;
		mOffsetParent = mOffsetParent.offsetParent;
	}
	return mOffsetLeft;
	}
function getTop(elm)
	{
	var mOffsetTop = elm.offsetTop;
	var mOffsetParent = elm.offsetParent;

	while(mOffsetParent){
		mOffsetTop += mOffsetParent.offsetTop;
		mOffsetParent = mOffsetParent.offsetParent;
	}
function setDiv(elem)
	{
	var popup = document.getObjectById('popup');
	popup.style.display = "block";
	popup.style.left = getLeft(elem);
	popup.style.top = getTop(elem)+getHeight(elem);
	}
function getHeight(elem)
	{
	return elem.offsetHeight;
	}
</script>

<div id="popup" style="position:absolute;display:none">
Inhalt
</div>
<a href="#" onclick="setTimeout('setDiv(this)',10)">Menu</a>

In den Body Tag:

onclick="document.getElementById('popup').style.display='none'"

Keine Garantie das es funktioniert. In den Layer mit der ID "Popup" kannst du die ganzen Menueinträge in normalem HTML schreiben

 

[tholmer]

jo thx Gottox nu funktioniert es
wie kann ich da jetzt noch was einbaun das es den einen link quasi "target" öffnet und die anderen normal "self"? muss ich das irgendwie noch mit reinquetschen?

 

[Gottox]

Du schreibst ganz normales HTML in den Layer:

<div id="popup" style="position:absolute;display:none">
<a href="URI" target="_blank">ABC</a>
<a href="URI" target="_self">ABC</a>
</div>
<a href="#" onclick="setTimeout('setDiv(this)',10)">Menu</a>

 

[tholmer]

hmm da blick ich nich durch, aber egal