# OnMouseOver Menu



## Michael Och (30. Dezember 2003)

Halli hallo,

Neulich habe ich auf einer *Seite* ein cooles Menu gesehen, und das würde ich gerne machen, ich wusste nicht genau, ob das nun HTML, Javascript oder was anderes ist... darum hab ich es hier gepostet.
In Flash wäre das kein Problem.. nur würde ich es gerne in HTML oder Javascript haben, danke für jede Hilfe,
mfG Michael


----------



## SilentWarrior (30. Dezember 2003)

Jop, das ist vermutlich mit JavaScript gemacht. Dazu brauchst du ein paar unsichtbare div's mit den entsprechenden Inhalten, die du dann bei mouseover auf sichtbar stellst.


----------



## Michael Och (30. Dezember 2003)

Danke für die schnelle Information, hättest du da eventuell ein Beispiel? Bin nämlich kein JavaScript Guru. 

MfG Michael


----------



## undertaker (30. Dezember 2003)

ich mach das so:


```
//irgendwo:
 <div id="div1" style="visibility: hidden; " onMouseOut="this.style.visibility='hidden'">Hier ist alles was unsichtbar ist!</div>


//und dann dort wo man mit der Maus durch Mouseover das menü "aufmachen" sollte kann auch ne Div sein, muss es aber nicht!

<div onMouseOver="document.getElementById('Div1').style.visibility='visible';">Mit der maus hier her!</div>
```


----------



## Fabian H (30. Dezember 2003)

@Undertaker: die langen Code-Zeilen...

@Michael: ich bin grad dabei, was zu schreiben, wenn du dich noch ne halbe 
Stunde geduldest, hast du ein funktionierendes Beispiel


----------



## Michael Och (30. Dezember 2003)

Funktioniert doch einwandfrei .

Danke für eure schnellen Hilfen, und einen guten Rutsch ins neue Jahr,

MfG Michael


----------



## Fabian H (30. Dezember 2003)

So, wie versprochen das Beispiel:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EM">
<html>
    <head>
        <meta http-equiv="content-type"
              content="text/html; charest=iso-8859-1">

        <title>JavaScript - PopUp-Men&uuml;</title>

        <style type="text/css">
        body {
          background-color: #DEDEDE;
          font-family: Arial;
          font-size: 12px;
          color: #353535;
        }

        a:link, a:active, a:visited {
          color: #222222;
          text-decoration: underline;
        }

        a:hover {
          color: #353535;
          text-decoration: none;
        }

        .Menu {
          position: absolute;
          top: 0px;
          background-color: #E2933E;
          width: 450px;
          height: 150px;
          text-align: center;
        }

        .MenuText {
          position: relative;
          top: 100px;
        }

        .Main {
          position: absolute;
          top: 150px;
          background-color: #E2AF7E;
          width: 450px;
          height: 500px;
        }

        .SubMenu {
          position: absolute;
          top: 120px;
          background-color: #E2AF7E;
          border: 1px solid #000000;
          padding: 6px;
          visibility: hidden;
        }

        .SMenu1 { width: 60px; }
        .SMenu2 { width: 40px; }
        .SMenu3 { width: 50px; }
        .SMenu4 { width: 50px; }
        .SMenu5 { width: 75px; }
        </style>

        <script type="text/javascript">
        var iOver = -1;
        var bHide = true;

        function setPositions()
        {
            aPositions = new Array( 120, 160, 195, 220, 250 );
            iSubMenus  = 5;
            iLeft      = ( ( screen.availWidth - 450 ) / 2 ) - 10;
            window.document.getElementById('oMenuDiv').style.left
                = iLeft + "px";
            window.document.getElementById('oMainDiv').style.left
                = iLeft + "px";

            for ( i=0; i<iSubMenus; i++ ) {
                window.document.getElementById("oSubMenu" + (i+1)).style.left
                    =  (iLeft + aPositions[i]) + "px";
            }
        }

        function toggleDisplay( a_iId, a_bStatus )
        {
            if ( a_bStatus == true ) {
                if ( iOver != -1 ) {
                    setHidden( iOver );
                }
                iOver = a_iId;
                window.document.getElementById("oSubMenu" + a_iId)
                    .style.visibility = "visible";
            } else {
                setTimeout( "setHidden( " + a_iId + " );", 500 );
            }
        }

        function setHidden( a_iId )
        {
            if ( bHide == true ) {
                window.document.getElementById("oSubMenu" + a_iId)
                    .style.visibility = "hidden";
            }
        }
        </script>
    </head>
    <body onLoad="setPositions();">
        <div class="Menu" id="oMenuDiv">
            <div class="MenuText">
                <a href="home.html" onMouseOver="toggleDisplay( 1, true );"
                   onMouseOut="toggleDisplay( 1, false );">Home</a>
                | <a href="me.html" onMouseOver="toggleDisplay( 2, true );"
                   onMouseOut="toggleDisplay( 2, false );">Me</a>
                | <a href="you.html" onMouseOver="toggleDisplay( 3, true );"
                   onMouseOut="toggleDisplay( 3, false );">You</a>
                | <a href="we.html" onMouseOver="toggleDisplay( 4, true );"
                   onMouseOut="toggleDisplay( 4, false );">We</a>
                | <a href="every.html" onMouseOver="toggleDisplay( 5, true );"
                   onMouseOut="toggleDisplay( 5, false );">Everyone</a></div>
        </div>
        <div class="Main" id="oMainDiv">
            <div style="margin: 10px;">Haupttext, lala</div>
        </div>
        <div class="SubMenu SMenu1" id="oSubMenu1" onMouseOver="bHide=false;"
             onMouseOut="bHide=true;toggleDisplay( 1, false );">
            Home 1<br>Home 2<br>Home 3</div>
        <div class="SubMenu SMenu2" id="oSubMenu2" onMouseOver="bHide=false;"
             onMouseOut="bHide=true;toggleDisplay( 2, false );">
             Me 1<br>Me 2<br>Me 3</div>
        <div class="SubMenu SMenu3" id="oSubMenu3" onMouseOver="bHide=false;"
             onMouseOut="bHide=true;toggleDisplay( 3, false );">
            You 1<br>You 2<br>You 3</div>
        <div class="SubMenu SMenu4" id="oSubMenu4" onMouseOver="bHide=false;"
             onMouseOut="bHide=true;toggleDisplay( 4, false );">
             We 1<br>We 2<br>We 3</div>
        <div class="SubMenu SMenu5" id="oSubMenu5" onMouseOver="bHide=false;"
             onMouseOut="bHide=true;toggleDisplay( 5, false );">
            Everyone 1<br>Everyone 2<br>Everyone 3</div>
    </body>
</html>
```


----------



## SilentWarrior (30. Dezember 2003)

Fabian: Anstatt in jedem Thread extra drauf hinzuweisen, würde ich lieber mal ein kleines Script programmieren, das vor dem Eintragen in die DB überprüft, ob Zeilen innerhalb von [ code]/[ code=php] eine gewisse Länge nicht überschreiten.


----------



## Fabian H (30. Dezember 2003)

Ähm bitte?
Sag mir eine Zeile, die breiter als das Layout ist und horizontale Scrollbalken 
hervorrufen würde?

Ausserdem:
Ich hab nichts dagegen, wenn lange zeilen gepostet werden, bei denen es nicht 
verhinderbar ist, sprich, bei denen man keinen Zeilenumbrüche hereinbringen 
könnte.

Und wenn du was gegen die Gesamtlänge hast, dann kann ich es ja 
meintewegen rausnehmen und als Anhang anhängen.

Sowas, da gibt man sich mal Mühe und schreibt ein Script und dann wird man 
gleich auf Sachen, die gar nicht da sind hingewiesen.

OK, ich geb ja zu, dass ich teilweise ein bisschen zu pingelig war mit den Zeilen, 
aber es ändert immer noch nichts daran, dass meine nicht zu lang sind.


----------



## Neurodeamon (30. Dezember 2003)

SilentWarrior hat gesagt.:
			
		

> Fabian: Anstatt in jedem Thread extra drauf hinzuweisen, würde ich lieber mal ein kleines Script programmieren, das vor dem Eintragen in die DB überprüft, ob Zeilen innerhalb von  [code ]/[ code=php ] eine gewisse Länge nicht überschreiten.




```
func_length($str_code) ? func_enter($str_code) : func_trash($str_code);
```


----------



## SilentWarrior (30. Dezember 2003)

Ich hab doch gar nicht deine gemeint, sondern die von undertaker.


----------



## Fabian H (30. Dezember 2003)

```
<div style="overflow:autowidth:100%;">
```
Weiß nicht, wie weit das mit den 100% hinhaut, mal ausprobieren.

Edit: ach ja - Sorry


----------



## Michael Och (31. Dezember 2003)

Nochmals vielen Dank für alles. 

MfG Michael - der nun weiss wies geht


----------

