OnMouseOver Menu

Status
Nicht offen für weitere Antworten.
M

Michael Och

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
 
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.
 
Danke für die schnelle Information, hättest du da eventuell ein Beispiel? Bin nämlich kein JavaScript Guru. :)

MfG Michael
 
ich mach das so:

PHP: 
//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>
 
@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 :)
 
Funktioniert doch einwandfrei :).

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

MfG Michael
 
So, wie versprochen das Beispiel:
PHP: 
<!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>
 
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.
 
Ä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.
 
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.
Zum Vergrößern anklicken....

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

:)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück