Navigation mit JavaScript

Navigation mit JavaScript

Demo | Download

Dieses mal geht es um eine Navigation, bei der zu jedem Item eine kurze Info erscheint, wenn man mit dem Cursor rüberfährt. Dies wird regelmäßig von Usability-Experten empfohlen und kann durchaus Sinn machen. Meine Lösung baut wie gewohnt auf HTML und CSS, sowie JavaScript für den Hover-Effekt.

Beginnen wir mit dem HTML-Teil:

HTML
<ul id="nav">
	<li>
		<a href="index.html">Home</a>
		<span>Back to frontpage</span>
	</li>
	<li>
		<a href="#">About</a>
		<span>Learn more about this site</span>
	</li>
	<li>
		<a href="#">Contact</a>
		<span>Send me an email</span>
	</li>
</ul>

Eine einfache, ungeordnete Liste, bei der zusätzlich zum Link die jeweilige Info in einem <span>-Elements steht.

Als nächstes der CSS-Teil:

CSS
#nav {
	width: 456px;
	height: 100px;
	list-style: none;
	clear: left;
}

li {
	width: 130px;
	height: 80px;
	padding: 20px 10px 0 10px;
	float: left;
	border-left: 2px solid #FFF;
	cursor: pointer;
}

li span {
	display: none;
}

.active {
	background: url('images/li_bg.jpg') 0 0 no-repeat;
}

.active span {
	display: block;
	line-height: 15px;
	color: #EEE;
}

a {
	display: block;
	margin-bottom: 5px;
	font: bold 24px Helvetica, Arial;
	color: #FFF;
	line-height: 30px;
}

Die Liste weist vom Styling her keine Abnormalitäten auf, außer, dass durch die Angabe cursor: pointer; über dem ganzen li-Element der für Links typische Cursor in Form einer Hand auftaucht. Warum das so ist, wird im JavaScript-Teil ersichtlich. Ansonsten ist das <span>-Element unsichtbar, es sei denn das li-Element hat die Klasse "active".

Nun zum JavaScript-Teil:

JavaScript
window.onload = function() {
	var lis = document.getElementById('nav').getElementsByTagName('li');
	mOver = function() {
		this.className = 'active';
	}
	mOut = function() {
		this.className = '';
	}
	mClick = function() {
		location.href = this.getElementsByTagName('a')[0].href;
	}
	for ( i=0; i<lis.length; i++ ) {
		with ( lis[i] ) {
			onmouseover = mOver;
			onmouseout = mOut;
			onclick = mClick;
		}
	}
}

Innerhalb einer window.onload-Funktion definieren wir als erstes den Selektor für die li-Elemente der ungeordneten Liste. Danach werden die Funktionen für die Maus-Events aufgestellt. Fährt man mit der Maus über ein li-Elemente, wird diesem die Klasse "active" angehängt. Geht man mit dem Cursor wieder vom li-Element runter, wird die Klasse wieder entfernt. Klickt man auf ein li-Element, wird man zu dem im jeweiligen Link spezifizierten URL weitergeleitet.

Dadurch erklärt sich auch die Angabe cursor: pointer; für li-Elemente im Stylesheet. Der klickbare Bereich wird einfach vergrößert, was dem Besucher der Seite die Nutzung der Navigation erleichtert.

Nachdem die Funktionen für die Maus-Events aufgestellt sind, werden sie in einer for-Schleife zugewiesen. Fertig ist die Navigation mit eingeblendeter Info. Wie immer könnt ihr euch die nötigen Dateien runterladen. Viel Spaß!

  • Twitter
  • Facebook
  • del.icio.us
  • MisterWong.DE
  • Yigg
  • MySpace
  • StumbleUpon
  • Webnews.de
  • LinkArena
  • Technorati
  • Digg

Geschrieben am 3. August 2009 • Abgelegt unter HTML/CSS, JavaScript, Tutorial • Rivva

2 Kommentare zu "Navigation mit JavaScript"

  1. Avalarion

    – 3.8.2009

    Hey ;)

    Nette Idee, die du da hast, aber das hätte man ja auch einfach mit nem CSS:HOVER machen können, oder? *g*

    Gruß

    Bastian
    PS: Ich kann nicht versprechen hier nochmal hin zu kommen, schick mir im zweifel ne Mail!

  2. Emanuel

    – 4.8.2009

    auf jeden fall geht das, aber dann muss man die beschreibung innerhalb der <a>-tags unterbringen, was ich für eine improvisierte lösung halte. so ist der quelltext meiner meinung nach aufgeräumter.

    außerdem wollte ich mal ein bißchen mit den onmouse-events von javascript rumspielen ;-)