Caché barre de menu qui s'affiche sur le vol stationnaire

Je suis en train de créer une barre de menu qui est caché par défaut, mais qui s'affiche sur le vol stationnaire. L'exemple le plus proche que je peux penser est celui-ci: http://www.sidlee.com/. Lorsque vous êtes sur l'une des pages au-delà de la page d'accueil, la barre latérale affiche uniquement les numéros. Une fois que vous déplacez votre souris sur cette zone, la barre latérale se développe pour afficher le texte. Je devine qu'il y a un moyen de le faire avec du JavaScript mais je ne suis pas expert, j'ai donc bien que quelqu'un ici pourrait m'aider.

Je veux travailler chez Sid Lee. Wowza!

OriginalL'auteur Edvard | 2011-01-27

  1. 6

    C'est juste un exemple simple, mais j'espère qu'il va vous mettre sur la bonne voie 🙂

    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>

    Si vous souhaitez afficher uniquement les numéros au début (sans l'animation de fermeture onload) modifier le #nav{width:35px;} et retirer le .trigger('mouseleave')

    Acclamations

    G.

    C'est exactement ce que je voulais! Merci beaucoup!
    Aussi, est-il un moyen de faire deux encadrés? Le problème que j'ai, c'est que si je mets un deuxième volet, je le préciser à quelle distance de la gauche, il doit être, et en tant que telle ne peut pas être "collé" (par manque d'un meilleur mot) à la première barre latérale.
    est-il un moyen de le faire sans jquery? J'ai l'intention de l'utiliser dans une tâche, j'ai, dans lequel on ne peut utiliser du JavaScript simple. tnx 🙂
    Comment le positionner sur le côté droit ??? J'ai essayé de mettre le "float" de la valeur à droite mais il ne fonctionne pas pour moi.

    OriginalL'auteur Gregory Machon

  2. 1

    Juste de commencer à bosser à la jQuery API. Voici comment vous pouvez commencer à la structure de celle-ci. À l'aide de .animate() vous donnera la possibilité d'ajuster votre menu propriétés css comment vous voyez l'ajustement.

    $("#yourmenu").hover( function() {
    $(this).stop(true,true);
    $(this).show();
}, function () {
   $(this).hide();
});
    Merci beaucoup d'avoir pris le temps de répondre à ma question. J'apprécie grandement.

    OriginalL'auteur Cole

  3. 1

    Edvard,

    Je vous suggère de faire cela de la manière suivante. Espérons que, avec quelques idées et quelques liens à droite jQuery éléments, vous devriez être en mesure d'obtenir ce fait.

    Première étape serait d'avoir un div qui est 100% transparent et une div à l'intérieur de celui qui contient le menu. Puis dans le menu div je voudrais cacher cet élément, puis, quand vous passez la souris sur le conteneur de la plongée, vous pourriez utiliser un .hover() méthode pour animer le glisser hors de l'intérieur de la div.

    Voici le code de base qui devrait vous obtenir a commencé.

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

    Puis un peu de 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; }

    Puis certains jQuery:

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

    C'est évidemment le code non testé, mais ça devrait vous donner une grande longueur d'avance! 🙂

    Merci beaucoup d'avoir pris le temps de répondre à ma question. J'apprécie grandement.

    OriginalL'auteur Mitch

  4. 1

    Vous pouvez utiliser du JQuery .hover() méthode en conjonction avec .animate() d'avoir un div glisser lorsqu'un .mouseenter() événement se produit.

    JQuery API pour Planer

    Merci beaucoup d'avoir pris le temps de répondre à ma question. J'apprécie grandement.

    OriginalL'auteur TALLBOY