+- net-board.net Archiv (https://net-board.net)
+-- Forum: Deine eigene Homepage (https://net-board.net/forumdisplay.php?fid=26)
+--- Forum: Scriptsprachen (+Datenbanksysteme) (https://net-board.net/forumdisplay.php?fid=19)
+--- Thema: Navigationsmenü (/showthread.php?tid=5389)
Navigationsmenü - trefixxx - 15.06.2006
Und hier ein weiterer Wunsch, von dem ich glaube, dass er nur mit Java zu realisieren ist
Siehe: http://www.id-gaming.net/
Wenn man mit der Maus über ein navigationselement fährt, erscheinen weitere Unterpunkte in der Leiste darunter, ohne dass die Seite neu geladen werden muss.
Wie mache ich das?
Leider habe ich keine große Ahnung von Java, weshalb mir auch der Quellcode nichts nützt.
Kann mir das vllt. jemand erklären, einbauen, vorlegen?
Danke!
- kickedINtheHEAD - 17.06.2006
hoi
gibt da verschiedene möglichkeiten das mit js zu realisieren
am einfachsten wäre es 3 divs einzubauen alle mit css auf display none zu setzen
jedes davon kriegt eine eindeutige id
danach bei beim javascript teil gibt man bei den links wo man drüber fährt a onmouseover drauf, das je nach link alle elemente mit getElementById anspricht und den dsiplay wert der zwei die nicht gezeigt werden sollen auf none und den letzten auf block
edit:
fertiges beispiel von mir hab ich schnell runter geschrieben
[code=php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>javascript</title>
<script type="text/javascript">
<!--
function link(number){
document.getElementById("undermenu1").style.display='none';
document.getElementById("undermenu2").style.display='none';
document.getElementById("undermenu3").style.display='none';
document.getElementById("undermenu"+number).style.display='block';
}
//-->
</script>
</head>
<body>
<div id="menu">
<a href=""><span onmouseover="link(1)">link1</span></a>
<a href=""><span onmouseover="link(2)">link2</span></a>
<a href=""><span onmouseover="link(3)">link3</span></a>
</div>
<div id="undermenu1" style="display:none">
<a href="">link11</a>
<a href="">link12</a>
<a href="">link13</a>
</div>
<div id="undermenu2" style="display:none">
<a href="">link21</a>
<a href="">link22</a>
<a href="">link23</a>
</div>
<div id="undermenu3" style="display:none">
<a href="">link31</a>
<a href="">link32</a>
<a href="">link33</a>
</div>
</body>
</html>[/code]
fallst eine vielzahl von links hast würd ichs vielleicht noch a bissal anderst schreiben, aber bei ner überschaubaren anzahl läuft das schon gut
- kickedINtheHEAD - 18.06.2006
hoi sorry für doppelpost aber dast es sicher mitbekommst
hab ma das mal a bissal genauer angschaut läuft echt gut nur ab und zu brauchst a paar sachen für browser wo js deaktiviert ist, so einfach wie is da jetzt ist sollts einfach nur an fleck geben wo nix is aber das kann au schlimmer werden wennst die sitemap net gscheid aufbaut is
vielleicht zeigst mal wost es brauchst dann kann ich da a paar möglichkeiten bieten das einzubauen
- trefixxx - 19.06.2006
danke, kicked.
ich habe deinen code nun teilweise verwendet.
http://www.tr-art.de/demo/version4
- kickedINtheHEAD - 19.06.2006
jo habs ma angeschaut
das mit innerhtml is au ne schöne lösung, zwar net so performant (is bei heutigen pc's aber e egal) aber sicher schöner zu implementieren
ich persönlich hab nur ne kleine allergie gegen innerhtml (und glaub der MAC-IE au) *fg*