# Navigation Dropdown (farbig javascript?)



## MastaDaDesasta (20. Februar 2004)

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 (20. Februar 2004)

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 (25. Februar 2004)

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 (11. März 2004)

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 (12. März 2004)

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 (13. März 2004)

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


----------



## Gottox (13. März 2004)

```
<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 (13. März 2004)

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 (13. März 2004)

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 (13. März 2004)

hmm da blick ich nich durch, aber egal


----------

