[dercheker3000]

hi
ich suche ein script für ein navigations menü es soll ungefähr so aussehen

mfg

dercheker3000

[dblay]

Hallo,

wieso ein Skript? Soll das Menü irgendwas dynamisches machen, was bei mir nicht funzt?

Ansosnten sollte das mit HTML und CSS ohne weiteres möglich sein. Am besten du liest dir mal diesen Artikel bei SELFHTML durch, da werden verschiedene Möglichkeiten ganz gut erläutert: http://de.selfhtml.o...ionsleisten.htm

[dercheker3000]

hi
ich bin aber immer noch nicht schlauer

mfg

dercheker3000

[dblay]

Was ist denn genau das Problem? Du machst einfach ne Liste, die du dann mit CSS ein bisschen formatierst. Oder hab ich dich da irgendwie falsch verstanden?

<ul>
  <li><a href="...">Steite 1</a></li>
  <li><a href="...">Steite 2</a></li>
  <li><a href="...">Steite 3</a></li>
  <li><a href="...">Steite 4</a></li>
</ul>

ul {
  margin:0; padding:0;
  list-style:none;
  height:30px;	  /* ggf. anpassen */
}

li {
  float:left;
  margin:5px; padding:0;
  border:1px solid black;
  background:#a00;
}

li a {
  display:block;
  padding:10px;
}

li a:link, li a:visited {
  color:#fff;
  background:#a00;
}

li a:hover {
  color:#fff;
  background:#500;
}

Edit: Codebox erstellt. Edit #2: Codebox wieder entfernt, zerschießt i-wie das Format

Nur mal so als Beispiel, ka. ob das jetzt gut aussieht, hab ich auch nicht gestestet, sollte von der Sache her aber so funktionieren. Mit den Farben/Größen/Hintergründen kannst du dann ja noch spielen

Dieser Beitrag wurde von dblay bearbeitet: 27. Oktober 2007 - 17:36

[amalbhalbe]

Edit - wupsa grad überrießen .. viel zu spät



Ja das menü macht was dynamisches was du nicht siehst

netten ausroll effekt beim hover


Ich würd dir empfehlen sollte dir das so gefallen - und du kein Problem damit haben JS zu verwenden - schau dir einfach die Skripte von der Site an

http://www.cafetwin.de/coolmenus3.js

und direkt im Source auch noch , daraus solltest du was basteln können

Dieser Beitrag wurde von amalbhalbe bearbeitet: 28. Oktober 2007 - 20:52

[Ghost-Lion]

Probiers mal mit der Vorlage

Angehängte Datei(en)

•  hp09.zip (11,56K)
  Anzahl der Downloads: 138

[amalbhalbe]

@Ghost-Lion : das Layout is ja nett .. aber wo is da der "effekt" drinne den er angesprochen hat? hab ichs übersehen?

[clyde²]

Vielleicht hilft dir das ein bischen weiter, stammt aus den Anfängen meiner Kenntnisse^^

Angehängte Datei(en)

•  oben.htm (7,02K)
  Anzahl der Downloads: 184

[dblay]

@amalbhalbe: Aha! Jetzt seh ich das Rollout auch ... (im FF) Danke für den Hinweis

Na von dem Skript auf der Seite würde ich dann mal spontan abraten, weil das im IE nicht funzt!!

Edit: Hier, das Script funktioniert in allen Browsern, macht aber keine Animation. Kann man ggf. aber einbauen.

function windowInit() {
	for(var i=0; i<document.getElementsByTagName('li').length; i++) {
		if(document.getElementsByTagName('li')[i].className.indexOf("subnav") > -1) {
			document.getElementsByTagName('li')[i].onmouseover = showSubMenu;
			document.getElementsByTagName('li')[i].onmouseout = hideSubMenu;
		}
	}
}
window.onload = windowInit;

function showSubMenu() {
	ul = this.firstChild;
	do {
		if(ul.nodeName == "UL") {
			ul.style.display = 'block';
			// dient dazu, die geöffneten Menüs per CSS anders darzustellen
			this.className = 'subnav hilite';
			break;
		}
		ul = ul.nextSibling;
	} while(true);
}
function hideSubMenu() {
	ul = this.firstChild;
	do {
		if(ul.nodeName == "UL") {
			ul.style.display = 'none';
			this.className = 'subnav';
			break;
		}
		ul = ul.nextSibling;
	} while(true);
}

Im html-Teil machst du einfach eine verschachtelte Liste, wichtig ist nur, dass die <li>, die ein Untermenü enthalten, die class "subnav" erhalten. (Damit das Skript nicht auf alle <li> angewandt wird Falsch, das wäre im Prinzip egal, das Skript sucht sich ja die verschachtelten Listen von alleine, aber man will natürlich nicht, dass auch "normale" verschachtelte Listen betroffen sind , außerdem kann man das gleich für die css-Formatierung verwenden.)

z.B.

<ul>
  <li><a href="...">Steite 1</a></li>
  <li class="subnav"><a href="...">Steite 2</a>
	<ul>
	  <li><a href="...">Seite 1.1</a></li>
	  <li><a href="...">Seite 1.2</a></li>
	  <li><a href="...">Seite 1.3</a></li>
	</ul>
  </li>
  <li><a href="...">Steite 3</a></li>
  <li><a href="...">Steite 4</a></li>
</ul>

Dieser Beitrag wurde von dblay bearbeitet: 29. Oktober 2007 - 15:13