Hallo,
ich habe da ein kleines Problem. Und zwar möchte ich ein kleines Sliding-Menü für eine Website haben mit drei Hauptpunkten und dazugehörigen Links. Ich habe auch eine Lösung gefunden um die Hauptpunkte einzeln aufzuklappen und die anderen gleichzeitig zu schließen. Jetzt habe ich allerdings das Problem, dass bei dem Klick auf einen Link das Menü wieder in den Ausgangszustand geht, der in der css-Datei mit der Funktion display festgelegt ist.
Meine Frage ist nun wie ich es hinbekomme den aktuellen Zustand zu speichern oder die display-Funktion in der css-Datei zu überschreiben.
Zur Hilfe hänge ich noch den html und javascript Code an.
Ich hoffe ihr könnt mir weiterhelfen.
javascript-code:
//abfrage um Opera 5 - 6 abzufangen
if (document.createTextNode) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"js.css\" />");
}
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
html-code
<html>
<head>
<title>CrimeStat</title>
<link rel="stylesheet" type="text/css" href="non-js.css">
<!--
Ist JS deaktiviert wird das ursprüngliche CSS verwendet, das eine andere Formatierung
für die Navi hat.
-->
<script type="text/javascript" src="sliding_menu.js.js"></script>
</head>
<body>
<div id="website">
<div id="header">
<div id="logo">
</div>
<div id="info">
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<div id="stripe">
</div>
<div id="navi">
<div onMousedown="changeStyleById('subnavi1','block');changeStyleById('subnavi2','none');changeStyleById('subnavi3','none')">
<div id="navi-text">
Straftaten
</div>
<div id="subnavi1">
<p class="navi-link"><a href="mut.html">Mord und Totschlag</a></p>
<p class="navi-link"><a href="sgsf.html">Straftat gegen sexuelle Freiheit</a></p>
<p class="navi-link"><a href="raub.html">Raub</a></p>
<p class="navi-link"><a href="kv.html">Körperverletzung</a></p>
<p class="navi-link"><a href="ds.html">Diebstahl</a></p>
<p class="navi-link"><a href="rk.html">Rauschgiftkriminalität</a></p>
<p class="navi-link"><a href="bs.html">Brandstiftung</a></p>
<p class="navi-link"><a href="sb.html">Sachbeschädigung</a></p>
<p class="navi-link"><a href="sgj.html">Straftat gegen Jugendschutzbestimmungen</a></p>
<p class="navi-link"><a href="betrug.html">Betrug</a></p>
<p class="navi-link"><a href="fd.html">Fälschungsdelikte</a></p>
<p class="navi-link"><a href="uk.html">Umweltkriminalität</a></p>
<p class="navi-link"><a href="ck.html">Computerkriminalität</a></p>
</div>
</div>
<div id="navi-toppoint" onMousedown="changeStyleById('subnavi2','block');changeStyleById('subnavi1','none');changeStyleById('subnavi3','none')">
<div id="navi-text">
Bezirke
</div>
<div id="subnavi2">
<p class="navi-link"><a href="char-wilm.html">Charlottenburg-Wilmersdorf</a></p>
<p class="navi-link"><a href="frie-kreuz.html">Friedrichshain-Kreuzberg</a></p>
<p class="navi-link"><a href="lichtenberg.html">Lichtenberg</a></p>
<p class="navi-link"><a href="mahr-hell.html">Marzahn-Hellersdorf</a></p>
<p class="navi-link"><a href="mitte.html">Mitte</a></p>
<p class="navi-link"><a href="neukoeln.html">Neuköln</a></p>
<p class="navi-link"><a href="pankow.html">Pankow</a></p>
<p class="navi-link"><a href="reinickendorf.html">Reinickendorf</a></p>
<p class="navi-link"><a href="spandau.html">Spandau</a></p>
<p class="navi-link"><a href="steg-zehl.html">Steglitz-Zehlendorf</a></p>
<p class="navi-link"><a href="temp-sch.html">Tempelhof-Schöneberg</a></p>
<p class="navi-link"><a href="trep-koep.html">Treptow-Köpenick</a></p>
</div>
</div>
<div onMousedown="changeStyleById('subnavi3','block');changeStyleById('subnavi1','none');changeStyleById('subnavi2','none')">
<div id="navi-text">
Statistiken
</div>
<div id="subnavi3">
<p class="navi-link"><a href="#">Mord und Totschlag</a></p>
<p class="navi-link"><a href="#">Straftat gegen sexuelle Freiheit</a></p>
<p class="navi-link"><a href="#">Raub</a></p>
<p class="navi-link"><a href="#">Körperverletzung</a></p>
</div>
</div>
</div>
<div id="content">
<div id="search">
Suche nach Straßen, Plätzen, etc.
<form class="search-form">
<input name="suchbegriff" type="text" size="52" maxlength="100">
<input type="button" name="Text 1" value="Maps-Suche">
</form>
</div>
<img src="content.png">
</div>
</div>
</body>
</html>
ich habe da ein kleines Problem. Und zwar möchte ich ein kleines Sliding-Menü für eine Website haben mit drei Hauptpunkten und dazugehörigen Links. Ich habe auch eine Lösung gefunden um die Hauptpunkte einzeln aufzuklappen und die anderen gleichzeitig zu schließen. Jetzt habe ich allerdings das Problem, dass bei dem Klick auf einen Link das Menü wieder in den Ausgangszustand geht, der in der css-Datei mit der Funktion display festgelegt ist.
Meine Frage ist nun wie ich es hinbekomme den aktuellen Zustand zu speichern oder die display-Funktion in der css-Datei zu überschreiben.
Zur Hilfe hänge ich noch den html und javascript Code an.
Ich hoffe ihr könnt mir weiterhelfen.
javascript-code:
//abfrage um Opera 5 - 6 abzufangen
if (document.createTextNode) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"js.css\" />");
}
function changeStyleById(el,ds) {
if (document.getElementById) {
var nodeObj = document.getElementById(el)
nodeObj.style.display = ds;
}
}
html-code
<html>
<head>
<title>CrimeStat</title>
<link rel="stylesheet" type="text/css" href="non-js.css">
<!--
Ist JS deaktiviert wird das ursprüngliche CSS verwendet, das eine andere Formatierung
für die Navi hat.
-->
<script type="text/javascript" src="sliding_menu.js.js"></script>
</head>
<body>
<div id="website">
<div id="header">
<div id="logo">
</div>
<div id="info">
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<div id="stripe">
</div>
<div id="navi">
<div onMousedown="changeStyleById('subnavi1','block');changeStyleById('subnavi2','none');changeStyleById('subnavi3','none')">
<div id="navi-text">
Straftaten
</div>
<div id="subnavi1">
<p class="navi-link"><a href="mut.html">Mord und Totschlag</a></p>
<p class="navi-link"><a href="sgsf.html">Straftat gegen sexuelle Freiheit</a></p>
<p class="navi-link"><a href="raub.html">Raub</a></p>
<p class="navi-link"><a href="kv.html">Körperverletzung</a></p>
<p class="navi-link"><a href="ds.html">Diebstahl</a></p>
<p class="navi-link"><a href="rk.html">Rauschgiftkriminalität</a></p>
<p class="navi-link"><a href="bs.html">Brandstiftung</a></p>
<p class="navi-link"><a href="sb.html">Sachbeschädigung</a></p>
<p class="navi-link"><a href="sgj.html">Straftat gegen Jugendschutzbestimmungen</a></p>
<p class="navi-link"><a href="betrug.html">Betrug</a></p>
<p class="navi-link"><a href="fd.html">Fälschungsdelikte</a></p>
<p class="navi-link"><a href="uk.html">Umweltkriminalität</a></p>
<p class="navi-link"><a href="ck.html">Computerkriminalität</a></p>
</div>
</div>
<div id="navi-toppoint" onMousedown="changeStyleById('subnavi2','block');changeStyleById('subnavi1','none');changeStyleById('subnavi3','none')">
<div id="navi-text">
Bezirke
</div>
<div id="subnavi2">
<p class="navi-link"><a href="char-wilm.html">Charlottenburg-Wilmersdorf</a></p>
<p class="navi-link"><a href="frie-kreuz.html">Friedrichshain-Kreuzberg</a></p>
<p class="navi-link"><a href="lichtenberg.html">Lichtenberg</a></p>
<p class="navi-link"><a href="mahr-hell.html">Marzahn-Hellersdorf</a></p>
<p class="navi-link"><a href="mitte.html">Mitte</a></p>
<p class="navi-link"><a href="neukoeln.html">Neuköln</a></p>
<p class="navi-link"><a href="pankow.html">Pankow</a></p>
<p class="navi-link"><a href="reinickendorf.html">Reinickendorf</a></p>
<p class="navi-link"><a href="spandau.html">Spandau</a></p>
<p class="navi-link"><a href="steg-zehl.html">Steglitz-Zehlendorf</a></p>
<p class="navi-link"><a href="temp-sch.html">Tempelhof-Schöneberg</a></p>
<p class="navi-link"><a href="trep-koep.html">Treptow-Köpenick</a></p>
</div>
</div>
<div onMousedown="changeStyleById('subnavi3','block');changeStyleById('subnavi1','none');changeStyleById('subnavi2','none')">
<div id="navi-text">
Statistiken
</div>
<div id="subnavi3">
<p class="navi-link"><a href="#">Mord und Totschlag</a></p>
<p class="navi-link"><a href="#">Straftat gegen sexuelle Freiheit</a></p>
<p class="navi-link"><a href="#">Raub</a></p>
<p class="navi-link"><a href="#">Körperverletzung</a></p>
</div>
</div>
</div>
<div id="content">
<div id="search">
Suche nach Straßen, Plätzen, etc.
<form class="search-form">
<input name="suchbegriff" type="text" size="52" maxlength="100">
<input type="button" name="Text 1" value="Maps-Suche">
</form>
</div>
<img src="content.png">
</div>
</div>
</body>
</html>
