• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ein Problem mit dem Menu

Cyberbob

Cyberbob

Mitglied
Hallo Leute,

ich habe da ein Problem mit meinem vertikalen Menu. Und zwar das Menu ist eine Tabelle, die ich mit CSS gestaltet habe. Diese Einträge, die sich in den td's befinden sind Navigationstasten, d.h. wenn man auf sie klickt, kommen ein paar mehr Spalten. Wenn man ein zweites Mal draufklickt, sind sie wieder weg. Das ist mein Problem, dies umzusetzen. Kann mir einer helfen, oder versteht ihr die Frage überhaupt?

Danke im Vorraus
MfG Cyberbob
 
ohne Code nichts los.

Am besten du zeigst uns deine Navi damit wir uns das Problem ansehen können.
Bringt nicht wenn 5-6-7 User schreiben..

hast du das...
hast du dies..
wie wäre es mit dem...




Gruß
 
ok 1:1Code:

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Ernst-Barlach-Gymnasium Schönberg</title>
</head>
<body>
<style type="text/css">

	body{color:white;background-color:#002147;font-family:Arial;font-size:12px}
	td:hover{background-color:#E6C800;cursor:pointer}
	a:link, a:visited{color:white;text-decoration:none}
	a:hover{text-decoration:underline}
	table{border:2px white solid; background-color:#1F2C50;font-size:13px}
	td{border-width:1px 0px 1px 0px;border-color:#8595A7;border-style:solid; background-color:#1F2C50;padding-	

left:12px;padding-right:20px;width:100px;text-decoration:none}
	#unterstrichen{border-width:0px 0px 0px 0px;border-style:solid;border-color:#000}
	#unterstrichen:hover{border-width:0px 0px 1px 0px;border-style:solid;border-color:#000}
	td:hover u{color:#000}

</style>
<table border="1" cellpadding="4" cellspacing="2">
<tr><td><u><a href="#">Das Gymnasium</a></u></td></tr>
<tr><td><u><a href="#">Gesunde Schule</a></u></td></tr>
<tr><td><u><a href="#">Lehre</a></u></td></tr>
<tr><td><u><a href="#">Arbeitsgemeinschaften</a></u></td></tr>
<tr><td><u><a href="#">Schüler</a></u></td></tr>
<tr><td><u><a href="#">Schulsozialarbeit</a></u></td></tr>
<tr><td><u><a href="#">Ausblicke</a></u></td></tr>
<tr><td><u><a href="#">Rückblicke</a></u></td></tr>
<tr><td><u><a href="#">Weitere Informationen</a></u></td></tr>
<tr><td><u><a href="#">Impressum</a></u></td></tr>
</table>
</body>
</html>
 
das hier ist jetzt aber was anderes. Aber so ungefähr so das dann in meiner tabelle entsprechen:
HTML: 
<html>
 <head>
 <style type="text/css">
 .weg {display: none; }
 .da {display: block}
 </style>
 <script type="text/JavaScript">
 var old;
 function eins()
 {
  if(old!='1')
  {
   document.getElementById('div1').className='da';
   document.getElementById('div2').className='da';
   document.getElementById('div3').className='weg';
   document.getElementById('div4').className='weg';
  old='1';
  }
 else
  {
   document.getElementById('div1').className='weg';
   document.getElementById('div2').className='weg';
   old='0';
  }
 }
 function zwei()
 {
  if(old!='2')
  {
   document.getElementById('div1').className='weg';
   document.getElementById('div2').className='weg';
   document.getElementById('div3').className='da';
   document.getElementById('div4').className='da';
  old='2';
  }
  else
  {
   document.getElementById('div3').className='weg';
   document.getElementById('div4').className='weg';
   old='0';
  }
 }
 </script>
 </head>
 <body>
 <div onclick="JavaScript: eins()">User verwalten</div>
   <div class="weg" id="div1">löschen</div>
   <div class="weg" id="div2">anlegen</div>
 <div onclick="JavaScript: zwei()">Fahrzeuge verwalten</div>
   <div class="weg" id="div3">löschen</div>
   <div class="weg" id="div4">anlegen</div>
 </body>
 </html>

Ich hoffe ich kann dir damit helfen.
 
So Vielleicht:
Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT LANGUAGE="JavaScript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>

<style type="text/css">
.menutitle {
display:block;
width:100px;
height:20px;

}

.untermenu {
display:hidden;
position:absolute;
width:100px;
height:20px;
left:110px;
}
</style>
</head>

<body>

<div id="masterdiv">
<div class="menutitle" ><IMG SRC="http://computer.t-online.de/b/41/07/93/20/id_41079320/tid_da/microsofts-neues-80-millionen-dollar-blau-.jpg"  HEIGHT="25" WIDTH="111" onclick="SwitchMenu('sub1')" onblur="SwitchMenu('');"><br></div>
<div class="untermenu">
 <span class="submenu" id="sub1">
  <a href="x.html" class="untermenue">       Unterlink 1</a><br>
  <a href="y.html" class="untermenue">        Unterlink 2</a><br>
  <a href="y.html" class="untermenue">        Unterlink 3</a><br>
 </span>
</div>
</div>
<br/>
<br/>
<br/>
<br />
<div class="menutitle"><IMG SRC="http://computer.t-online.de/b/41/07/93/20/id_41079320/tid_da/microsofts-neues-80-millionen-dollar-blau-.jpg"  HEIGHT="25" WIDTH="111" onclick="SwitchMenu('sub2')" onblur="SwitchMenu('');"><br></div>
<div class="untermenu">
 <span class="submenu" id="sub2">
  <a href="x.html" class="untermenue">- Unterlink 3</a><br>
  <a href="y.html" class="untermenue">- Unterlink 4</a><br>
  <a href="y.html" class="untermenue">- Unterlink 5</a><br>
 </span>
</div>
</div>
<br/>
<br/>
<br/>
<br />
<div class="menutitle"><IMG SRC="http://computer.t-online.de/b/41/07/93/20/id_41079320/tid_da/microsofts-neues-80-millionen-dollar-blau-.jpg"  HEIGHT="25" WIDTH="111" onclick="SwitchMenu('sub3')" onblur="SwitchMenu('');"><br></div>
<div class="untermenu">
 <span class="submenu" id="sub3">
  <a href="x.html" class="untermenue">- Unterlink 6</a><br>
  <a href="y.html" class="untermenue">- Unterlink 7</a><br>
  <a href="y.html" class="untermenue">- Unterlink 8</a><br>
 </span>
</div>
</div>
<br/>
<br/>
<br/>
<br />
<div class="menutitle"><IMG SRC="http://computer.t-online.de/b/41/07/93/20/id_41079320/tid_da/microsofts-neues-80-millionen-dollar-blau-.jpg"  HEIGHT="25" WIDTH="111" onclick="SwitchMenu('sub4')" onblur="SwitchMenu('');"><br></div>
<div class="untermenu">
 <span class="submenu" id="sub4">
  <a href="x.html" class="untermenue">- Unterlink 9</a><br>
  <a href="y.html" class="untermenue">- Unterlink 10</a><br>
  <a href="y.html" class="untermenue">- Unterlink 11</a><br>
 </span>
</div>
</div>


</body>

</html>

Ich hoffe das hier hilft dier wenn du mit Mouseover willst musst du onclick mit onmouseover und onblur mit onmouseout austauschen



MFG


Marc2010
 
jha das ist sehr gut! Aber leider hab ich gerade 0 Ahnung, wie ich es hinbekomme, dass es in td's (Tabelle) angezeigt werden kann. :(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben