Versteckte Seitenleiste, zeigt bis auf hover

Ich versuche, um eine Seitenleiste zu erstellen, die standardmäßig ausgeblendet ist, aber zeigt, dass bis auf hover. Das nächste Beispiel, das ich denken kann, ist dieses: http://www.sidlee.com/. Wenn Sie auf eine der Seiten jenseits der Startseite, der sidebar zeigt nur zahlen. Sobald Sie mit der Maus über diesen Bereich, die sidebar erweitert den text angezeigt. Ich vermute, es ist ein Weg, dies zu tun, mit JavaScript, aber ich bin kein Experte, also ich, dachte jemand hier könnte mir helfen.

Ich will arbeiten, bei Sid Lee. Wowza!

InformationsquelleAutor Edvard | 2011-01-27

  1. 6

    Das ist nur ein einfaches Beispiel, aber ich hoffe, es wird Sie auf dem richtigen Weg 🙂

    CSS:

    #nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

    jQuery:

    $(function(){
    $('#nav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

    HTML:

    <div id="nav">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>

    Wenn Sie möchten, um nur zahlen zu starten (ohne die schließen-animation "onload") ändern Sie die #nav{width:35px;} und entfernen Sie die .trigger('mouseleave')

    Cheers

    G.

    Das ist genau das, was ich wollte!!! Vielen Dank!
    Außerdem ist es eine Möglichkeit, zwei Seitenleisten? Das problem ist, dass ich, wenn ich eine zweite sidebar, die ich habe, um anzugeben, wie weit von der linken hat es zu sein, und als solche kann nicht 'geklebt' (for Lack of a better word) , die erste Seitenleiste.
    gibt es eine Möglichkeit, dies zu tun, ohne jquery? Ich Plane, verwenden Sie diese in einer Aufgabe, die ich habe, in der wir nur können ganz einfach JavaScript. tnx 🙂
    Wie positionieren Sie es auf der rechten Seite ??? Ich habe versucht, die "float" - Wert zu Recht, aber es hat nicht funktioniert für mich.

    InformationsquelleAutor Gregory Machon

  2. 1

    Starten Sie einfach einstecken entfernt an der jQuery API. So würde man beginnen, die Struktur der Sie. Mit .animieren() geben Ihnen die Möglichkeit zum anpassen der Menü-css-Eigenschaften, wie Sie sehen, passen.

    $("#yourmenu").hover( function() {
    $(this).stop(true,true);
    $(this).show();
}, function () {
   $(this).hide();
});
    Ich danke Ihnen sehr für die Zeit nehmen, um meine Frage zu beantworten. Ich sehr zu schätzen.

    InformationsquelleAutor Cole

  3. 1

    Edvard,

    Ich würde vorschlagen, tun dies auf folgende Weise. Hoffentlich mit einigen Ideen und ein paar links zu den richtigen jQuery-Elemente, die Sie sollten in der Lage sein, dieses zu erhalten getan.

    Erste Schritt wäre eine div, die 100% transparent und ein div-innen, die das Menü enthält. Dann aus dem Menü div, würde ich ausblenden, element, dann, wenn Sie mit der Maus über die container Tauchen Sie gebrauchen könnte .hover () - Methode zum animieren Sie die Folie aus dem inneren div.

    Hier finden Sie einige grundlegende code, das sollte Ihnen den Einstieg.

    <div id="menuContainer">
    <div id="menu">
        <ul>
            <li>This</li>
            <li>Is</li>
            <li>A</li>
            <li>Menu</li>
        </ul>
    </div>
</div>

    Dann einige CSS:

    /* Set the container to be fixed to the top of the screen and set it's height
   This is important so we know where the mouse can hover */
div#menuContainer {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
}

/* Set the menu as hidden */
div#menu {
    background: red;
    width: 900px;
    height:
    margin: 0 auto;
    display: none;
}

/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }

    Dann einige jQuery:

    $('#menuContainer').mouseenter(function(){
    $('#menu').slideToggle();
}).mouseleave(function() {
    $('#menu').slideToggle();
});

    Dies ist offensichtlich ungetestete code, aber es sollte geben Ihnen einen großen Vorsprung! 🙂

    Ich danke Ihnen sehr für die Zeit nehmen, um meine Frage zu beantworten. Ich sehr zu schätzen.

    InformationsquelleAutor Mitch

  4. 1

    Können Sie die JQuery - .hover() - Methode in Verbindung mit .animate() eine div slide-out-wenn ein .mouseenter() Ereignis Auftritt.

    JQuery-API für den Hover

    Ich danke Ihnen sehr für die Zeit nehmen, um meine Frage zu beantworten. Ich sehr zu schätzen.

    InformationsquelleAutor TALLBOY

Schreibe einen Kommentar