web-dev-qa-db-fra.com

css pour un menu de la barre latérale qui se replie et se replie

j'ai cherché des tutoriels sur la création d'un menu de barre latérale simple pour un site pouvant être replié et déformé en cliquant sur le bouton d'accueil situé en regard du menu de la barre latérale. icône hamburger. Je ne trouve pas vraiment ce que je cherche, peut-être que je n'utilise pas la bonne terminologie.

Toute aide est appréciée, Thx

B

cssmenusidebar
6
Justin Othername

Vous ne savez pas quel type de solution vous souhaitez, CSS pur, JS, jQuery, etc., mais voici quelques liens pour vous aider à démarrer.

Essayez de chercher "css slide out sidebar" ou quelque chose du genre.

Exemples jQuery

http://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/

http://www.berriart.com/sidr/

http://mmenu.frebsite.nl/

http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

Exemple CSS

http://css-tricks.com/off-canvas-menu-with-css-target/

12
Slavenko Miljic
<div id="slideout">
    <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
    <div id="slideout_inner">Hi Welcome to Stack Overflow</div>
</div>

CSS

#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#slideout_inner {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#slideout:hover {
    left: 250px;
}
#slideout:hover #slideout_inner {
    left: 0;
}
img {
    width:100px;
    height:100px;
}

Working Fiddle

code source

démo

4
Amarnath Balasubramanian

J'ai changé le code CSS (exemple de Amarnath), un peu. À des fins de test seulement. Je peux donc mieux comprendre la fonction. Peut-être que cela peut aider quelqu'un ...

#slideout {
    position: fixed;

    top: 0px;
    left: 0;
    width: 10px;
    height: 100px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    left: 180px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: 0px;
    left: -180px;
    width: 180px;
    height: 100px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    left: 0;
    background-color: Magenta;
}
0
peter70

Désolé si c'est ennuyeux, mais voici un autre exemple pour le moment. Nous avons ici une barre pliable horizontalement:

#slideout {
    position: fixed;

    top: 0px;
    height: 10px;
    left: 0px;
    right: 0px;

    background-color: yellow;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
}

#slideout:hover {
    top: 50px;
    background-color: cyan;
}

#slideout_inner {
    position: fixed;

    top: -50px;
    height: 50px;
    left: 0px;
    right: 0px;

    background-color: red;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover #slideout_inner {
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: Magenta;
}

Les couleurs sont un peu mordantes, mais cela sert à mieux illustrer. À votre santé!

0
peter70