|
|
|
|
|
|
Anwendung:
|
Schema zum Aufbau einer horizontalen Menuleiste, ähnlich wie sie in Windows-Applicationen üblich ist, für HTML-Seiten.
|
|
|
Beschreibung:
|
Jeder Haupt-Menupunkt wird durch einen absolut positionierten HTML-Block (<div>) dargestellt. Die aufklappenden Menupunkte werden durch unsichtbare DIV-Blöcke realisiert. Wird nun der Haupt-Menupunkt mit der Maus überfahren, dann wird über das onMouseOver-Ereignis der unsichtbarer HTML-Block mit den Sub-Menupunkten sichtbar geschaltet. Verläßt die Maus den Bereich der Sub-Menupunkte oder des Haupt-Menupunkts, dann wird der Block mit den Sub-Menupunkten über das onMouseOut-Ereignis wieder unsichtbar geschaltet.
Die CSS-Elemente (styles.css):
|
/* Menu */
div.menu
{
vertical-align:middle;
display: block;
background-color:#000000;
position: absolute;
border:solid 1px #808080;
font-family:verdana, sans-serif;
font-size: 10pt;
z-index:1;
}
a.menu:link
{
vertical-align:middle;
background-color:#000000;
display: block;
color:white;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 10pt;
}
a.menu:visited
{
vertical-align:middle;
background-color:#000000;
display: block;
color:white;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 10pt;
}
a.menu:active
{
vertical-align:middle;
background-color:#000000;
display: block;
color:white;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 10pt;
}
a.menu:hover
{
vertical-align:middle;
background-color:#a2abb2;
display: block;
color:black;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 10pt;
}
|
|
Die benötigten Jave-Functions (menu.js):
|
function blurMenuLinks()
{
Links = document.getElementsByTagName('a');
for(Index = 0; Index < Links.length; Index++)
{
Links[Index].onFocus = new function("if(this.blur)this.blur()");
}
}
function openMenu(Menu)
{
// DOM ALLE NEUEN BROWSER
if (document.getElementById)
{
document.getElementById(Menu).style.visibility="visible";
}
// IE 5
if (document.all)
{
document.all[Menu].style.visibility="visible";
}
// NN 4
if (document.layers)
{
document.layers[Menu].visibility="visible";
}
}
function closeMenu(Menu)
{
// DOM ALLE NEUEN BROWSER
if (document.getElementById)
{
document.getElementById(Menu).style.visibility="hidden";
}
// IE 5
if (document.all)
{
document.all[Menu].style.visibility="hidden";
}
// NN 4
if (document.layers)
{
document.layers[Menu].visibility="hidden";
}
}
|
|
Beispiel eines Haupt-Menupunktes:
|
<div id="MainMenu" class="menu" style="top:20px; left:20px; height:18px; width:140px;"
onmouseover="openMenu('SubMenu')" onmouseout="closeMenu('SubMenu')">
<a href="javascript:openMenu('SubMenu')" class="menu" style="height:18px; width:140px;"
onmouseover="openMenu('SubMenu')" onmouseout="closeMenu('SubMenu')">
Länder
</a>
</div>
|
|
Beispiel eines HTML-Blocks mit Sub-Menupunkten:
|
<div id="SubMenu" class="menu" style="top:38px; left:20px; width:140px; visibility:hidden;"
onmouseover="openMenu('SubMenu'); " onmouseout="closeMenu('SubMenu'); ">
<a href="#" class="menu" style="height:18px; width:140px;">
England
</a>
<a href="#" class="menu" style="height:18px; width:140px;">
Deutschland
</a>
<a href="#" class="menu" style="height:18px; width:140px;">
Niederlande
</a>
<a href="#" class="menu" style="height:18px; width:140px;">
Spanien
</a>
</div>
|
|
|
|
|
Beispiel:
|
Beispiel
|
|
|
|
|