Gerhard Raabe

JavaScript:

JavaScript: Menu 1

Der nachfolgende Code ist frei verfügbar, solange er nicht kommerziell verwendet wird! Falls er so wie veröffentlicht, in Teilen oder abgewandelt zum Einsatz kommt, würde ich mich sehr über eine kurze E-Mail freuen.

Anwendung:

Schema zum Aufbau einer horizontalen Menuleiste, ähnlich wie sie in Windows-Applicationen üblich ist, für HTML-Seiten.

Beispiel:

Beispiel Menu 1

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.

Aussehen und Highlighting der Menupunkte wird über das CSS-File styles.css im Download bestimmt.

Die benötigten JavaScript-Funktionen sind im js-File menu.js (im Download) hinterlegt.

Die CSS-Elemente (styles.css):

/* Menu */
div.menu
{
   vertical-align: middle;
   display: block;
   background-color: #a2abb2;
   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: #a2abb2;
   display: block;
   color: white;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 10pt;
}

a.menu:visited
{
   vertical-align: middle;
   background-color: #a2abb2;
   display: block;
   color: white;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 10pt;
}

a.menu:active
{
   vertical-align: middle;
   background-color: #a2abb2;
   display: block;
   color: white;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 10pt;
}

a.menu:hover
{
   vertical-align: middle;
   background-color: #e4e5e7;
   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>

Download:

Menu 1

##, ## ### #### - ##:##:##