Genealogie - Documentation

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