Probleme mit CSS Navigation

DawN1337 · 19. März 2009

Hi Folks...

Ich hab da mal so nen problem^^
und zwar bin ich gerade dabei eine ordentliche navigation mittels css zu bauen... nur leider gelingt mir dies nicht so ganz ....

Das Problem ist das ich durch ein Button onclick weitere buttons neu einblenden will ...

hier der Code den ich bis jetzt erstellt habe...

<form>
<h1 id="Beispiel">Menü</h1>
<div>
<ul id="Navigation">
<li><input type="button" value="Itemeditor" onclick=""></li>
<li><input type="button" name="text" value="Texteditor" onclick='this.form.div.ul.li.submenu.style.visibility="visible"'>
<ul name="submenu" style="visibility:hidden">
<li><input type="button" value="Index" onclick=""></li>
<li><input type="button" value="News" onclick=""></li>
<li><input type="button" value="Items" onclick=""></a></li>
</ul>
</li>
<li><input type="button" value="mehr" onclick=""></li>
</ul>
</div>
</form>

bin so nen bissel ratlos ....

über eine schnelle antwort würde ich mich sehr freuen...

mfg DawN

User007 · 19. März 2009

Also, ich würd' sagen, dein Problem hat nur sekundär mit CSS zu tun. Was du suchst, wird per JavaScript realisiert - das sagt allein schon der Eventhandler "onclick".
Versuch's mal hiermit. Da gibt's Beispiele, die du sicher auf deine Wünsche anwenden kannst...

TiME-SPLiNTER · 19. März 2009

Da war mir doch eben langweilig

. Deshalb habe ich dir so ein ausklappmenu gebastelt

.

Zu beachten: Mittels javascript:submenu('[menuid]'); gibst du das Menü an, welches beim Klick auf den Link angezeigt werden soll. Wobei [menuid] der DOM-ID deines Menüs entspricht. Es kann eine Liste, ein Div, ein Form oder was weiss ich sein.

ZUDEM muss standardmässig bei Menüs die erst bei einem Klick auf einen Link eingeblendet werden sollen im CSS die Eigenschaft display:none; haben.

UND du brauchst noch die Prototype-Library. Die musst du ebenfalls in deine HTML-Seite einbinden. Die findest du hier

HTML:

<html>
	<head>
		<title>test</title>
		<script src="js/prototype.js" language="javascript" type="text/javascript"></script>
		
		<script language="javascript">
			<!--
				var menuon = 0;
				var lastmenuid = "";
				
				function submenu(menuid) {
					if(menuon == 1 & menuid == lastmenuid) {
						menuon = 0;
						$(lastmenuid).style.display = "none";
						lastmenuid = "";
					} else {
						if(menuon == 1) {
							$(lastmenuid).style.display = "none";
							$(menuid).style.display = "block";
							lastmenuid = menuid;
						} else {
							menuon = 1;
							$(menuid).style.display = "block";
							lastmenuid = menuid;
						}
					}
				}
			-->
		</script>
		
		<style type="text/css">
			body {
				font-family:"Trebuchet MS",Arial;
				font-size:13px;
			}
			
			#Navigation {
				border:1px solid #777777;
				background-color:#dddddd;
				padding:0px;
				margin:0px;
				overflow:auto;
			}
			
			#Navigation li {
				display:inline;
				float:left;
			}
			
			#Navigation li a {
				display:block;
				background-color:#dddddd;
				border-left:1px solid #eeeeee;
				border-right:1px solid #aaaaaa;
				text-decoration:none;
				color:#666666;
				padding:4px;
				padding-left:8px;
				padding-right:8px;
			}
			
			#Subnavi1 {
				display:none;
				padding:0px;
				margin:0px;
				background-color:#cc0000;
				font-size:11px;
				border:1px solid #440000;
				border-top:none;
				overflow:auto;
			}
			
			#Subnavi1 li {
				float:left;
				display:inline;
			}
			
			#Subnavi1 li a {
				display:block;
				background-color:#cc0000;
				border-right:1px solid #880000;
				border-left:1px solid #ff0000;
				color:#ffffff;
				text-decoration:none;
				padding:2px;
				padding-left:8px;
				padding-right:8px;
			}
			
			#Subnavi2 {
				display:none;
				padding:0px;
				margin:0px;
				background-color:#00cc00;
				font-size:11px;
				border:1px solid #004400;
				border-top:none;
				overflow:auto;
			}
			
			#Subnavi2 li {
				float:left;
				display:inline;
			}
			
			#Subnavi2 li a {
				display:block;
				background-color:#00cc00;
				border-right:1px solid #008800;
				border-left:1px solid #00ff00;
				color:#ffffff;
				text-decoration:none;
				padding:2px;
				padding-left:8px;
				padding-right:8px;
			}
		</style>
	</head>
	<body>
		<ul id="Navigation">
			<li><a href="home.php">Startseite</a></li>
			<li><a href="javascript:submenu('Subnavi1');">Suchmaschinen</a></li>
			<li><a href="javascript:submenu('Subnavi2');">Computerseiten</a></li>
			<li><a href="impressum.php">Impressum</a></li>
		</ul>
		<ul id="Subnavi1">
			<li><a href="http://www.google.ch/">Google</a></li>
			<li><a href="http://www.yahoo.ch/">Yahoo!</a></li>
			<li><a href="http://www.live.com/">MSN Live Search</a></li>
			<li><a href="http://www.altavista.ch/">Altavista</a></li>
		</ul>
		<ul id="Subnavi2">
			<li><a href="https://www.computerbase.de/">computerbase.de</a></li>
			<li><a href="http://www.pctipp.ch/">pctipp.ch</a></li>
			<li><a href="http://www.chip.de/">chip.de</a></li>
			<li><a href="http://www.heise.de/ct/">c't</a></li>
		</ul>
	</body>
</html>

Suche

Probleme mit CSS Navigation

DawN1337

Cadet 3rd Year

User007

Rear Admiral

TiME-SPLiNTER

Ensign

Ähnliche Themen