Markus Mayer: Aufklappbare Navigationen

Beitrag lesen

Eine Möglichkeit wäre mit divs und javascript, für die anpassung wären javascript-kenntnisse aber schon fast erforderlich.

Ohne Grafiken:

<html>
<head>
<title>Menü mit DIVs</title>
<style>
.norm {background-color: #ffff00; font-family: Verdana, Arial, Helvetica; font-size: 12px; color: darkblue; width:100; height:16; cursor:hand; text-align:center}
</style>
<script language="JavaScript">
<!--
menu_act=new Array(0,0,0);
function menu_down(reihe,nummer) {
if (menu_act[reihe-1]==0) {
menu_act[reihe-1]=1;
for (var i=1;i<nummer+1;i++) {
document.getElementById('m'+reihe+'-'+i).style.visibility='visible';
}}
}
function menu_up(reihe,nummer) {
if (menu_act[reihe-1]==1) {
menu_act[reihe-1]=0;
for (var i=1;i<nummer+1;i++) {
document.getElementById('m'+reihe+'-'+i).style.visibility='hidden';
}}
}
function goto(url,reihe,nummer) {
menu_up(reihe,nummer);
location.href=url;
// oder im Frameset: parent.[FRAMENAME].location.href=url;
}
function c_color(c_div) {
c_div.style.backgroundColor="#aaff00";
}
function o_color(c_div) {
c_div.style.backgroundColor="#ffff00";
}
-->
</script>
</head>
<body>
<div class=norm style="position:absolute; left:6; top:6; visibility:visible" id="m1" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);">&Uuml;berpunkt#1</div>
<div class=norm style="position:absolute; left:6; top:22; visibility:hidden" id="m1-1" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);" onclick="goto('http://www.url.de',1,2);">Punkt 1-1</div>
<div class=norm style="position:absolute; left:6; top:38; visibility:hidden" id="m1-2" onmouseover="menu_down(1,2); c_color(this);" onmouseout="menu_up(1,2); o_color(this);" onclick="goto('http://www.url.de',1,2);">Punkt 1-2</div>
<div class=norm style="position:absolute; left:112; top:6; visibility:visible" id="m2" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);">&Uuml;berpunkt#2</div>
<div class=norm style="position:absolute; left:112; top:22; visibility:hidden" id="m2-1" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-1</div>
<div class=norm style="position:absolute; left:112; top:38; visibility:hidden" id="m2-2" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-2</div>
<div class=norm style="position:absolute; left:112; top:54; visibility:hidden" id="m2-3" onmouseover="menu_down(2,3); c_color(this);" onmouseout="menu_up(2,3); o_color(this);" onclick="goto('http://www.url.de',2,3);">Punkt 2-3</div>
<div class=norm style="position:absolute; left:218; top:6; visibility:visible" id="m3" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);">&Uuml;berpunkt#3</div>
<div class=norm style="position:absolute; left:218; top:22; visibility:hidden" id="m3-1" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-1</div>
<div class=norm style="position:absolute; left:218; top:38; visibility:hidden" id="m3-2" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-2</div>
<div class=norm style="position:absolute; left:218; top:54; visibility:hidden" id="m3-3" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-3</div>
<div class=norm style="position:absolute; left:218; top:70; visibility:hidden" id="m3-4" onmouseover="menu_down(3,4); c_color(this);" onmouseout="menu_up(3,4); o_color(this);" onclick="goto('http://www.url.de',3,4);">Punkt 3-4</div>
</body>
</html>

Mit Grafiken:
http://www.markusmayer.grmhome.de/menue_mit_divs.htm

Das Menü wäre beliebig erweiterbar, wobei bei den Funktionen menu_down und menu_up der erste parameter die reihe, und die zweite die anzahl der unterpunkte dieser reihe angibt.

Gruß,
Markus