nicht angemeldet
Probleme mit Naviagtionsprogrammierung
hallo! bin momentan am erstellen einer neuen navigation! leider werden beim öffnen der datei alle untermenüs sofort geöffnet und ich wollte noch dass alle schaltflächen beim mouseover die farbe wechseln! vielleicht kann sich ja mal einer den code in den editor kopieren und mal drübersehen! wäre sehr hilfreich
mfg markus
<html xml:lang="en" lang="en">
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: #c00;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:11pt;
font-family:Arial;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 80px;
left: 30px;
}
#menu {
width: 140px;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 2px solid black;
border-style:groove;
background: #fc0;
}
#menu dd {
cursor: pointer;
margin: 0px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 2px black;
background: #c00;
}
#menu li {
cursor: pointer;
margin: 0px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px black;
background: #c00;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0px none;
height: 100%
}
#menu li a:hover {
background: #ffcc00;
}
#menu dt a:hover {
background: #c00;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ffcc00;
}
-->
</style>
<base target="Hauptframe">
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Startseite</a></dt>
<dt onclick="javascript:montre('smenu2');">Berichte</dt>
<dd id="smenu2">
<ul>
<li><a href="#">2008</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2005</a></li>
<li><a href="#">2004</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Einsätze</dt>
<dd id="smenu3">
<ul>
<li><a href="#">2008</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2005</a></li>
<li><a href="#">2004</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">wir über uns</dt>
<dd id="smenu4">
<ul>
<li><a href="#">unser Dorf</a></li>
<li><a href="#">Chronik</a></li>
<li><a href="#">Vorstandschaft</a></li>
<li><a href="#">Verwaltungsrat</a></li>
<li><a href="#">Fahnenjunker und Fahnenbegleitung</a></li>
<li><a href="#">Verwaltungsrat</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu5');">Ausrüstung</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Gerätehaus</a></li>
<li><a href="#">Einsatzfahrzeuge</a></li>
<li><a href="#">sonstige Geräte</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="#">Mannschaft</a></dt>
<dt onclick="javascript:montre('smenu6');">Termine</dt>
<dd id="smenu6">
<ul>
<li><a href="#">Allgemein</a></li>
<li><a href="#">aktive Mannschaft</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu7');">Jugendfeuerwehr</dt>
<dd id="smenu7">
<ul>
<li><a href="#">Berichte</a></li>
<li><a href="#">Mannschaft</a></li>
<li><a href="#">Geschichte</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="#">Gästebuch</a></dt>
<dt onclick="javascript:montre();"><a href="#">Links</a></dt>
</dl>
</body>
</html>
-
Bonjour :D
Also ich habs mir etz net wirklich durchgelesen nur folgendes ist mir bei montre aufgefallen:display="block"
Was möchtest du damit erreichen?
Unsichtbarkeit geht so:
document.getElementById(->id<-).style.visibility = "hidden" ;
Sichtbar machen:
document.getElementById(->id<-).style.visibility = "visible" ;
Ich hoffe ich habe mich nirgends vertippt.
Gruß Marius