Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 02.06.2008, 12:47
Benutzerbild von mantiz
mantiz mantiz ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.845
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Ich hab's jetzt nur mal von der Idee her "skizziert".

Für die Haupt-Navi-Punkte wird gehovered und das Untermenü wird eingeblendet.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		
		<title>[ untitled ]</title>
		
		<style type="text/css">
			* { margin: 0; padding: 0; }
			ul { list-style: none; position: relative; width: 100px; background: #FFF; border: 2px outset #FFF; }
			li { display: block; }
			li ul { display: none; }
			li.myHover { color: highlighttext; background: highlight; }
			li.myHover ul {
				position: absolute;
				left:     90%;
				top:      10%;
				display:  block;
			}
		</style>
		<script type="text/javascript">
			function hover_me(el) {
				window.setTimeout("document.getElementById('" + el.getAttribute('id') + "').className='myHover';", 500);
			}
			function unhover_me(el) {
				window.setTimeout("document.getElementById('" + el.getAttribute('id') + "').className='';", 500);
			}
		</script>
	</head>

	
	<body>
		
		<ul>
			<li id="p1" onmouseover="hover_me(this);" onmouseout="unhover_me(this);">
				Punkt 1
				<ul>
					<li>Punkt 1.1</li>
					<li>Punkt 1.2</li>
				</ul>
			</li>
			<li id="p2" onmouseover="hover_me(this);" onmouseout="unhover_me(this);">Punkt 2</li>
		</ul>
        		
	</body>
	
</html>
Die CSS-Klasse wird zeitversetzt geändert, dadurch wird gleichzeitig die Hervorhebung realisiert, sowie das Untermenü angezeigt.
Man könnte das Untermenü ebenfalls per JS über einen eigenen Timmer anzeigen, hab' ich mir jetzt aber gespart.

Ich bin leider auch nicht wirklich fit in Javascript.
Mit Zitat antworten
Sponsored Links