it-swarm.com.de

css für ein Sidebar-Menü, das ein- und ausgeklappt werden kann

ich habe mich nach Tutorials umgesehen, wie man ein einfaches Seitenleistenmenü für eine Site erstellt, die durch Klicken auf eine Startschaltfläche neben dem Seitenleistenmenü ein- und ausgeklappt werden kann, ähnlich wie das Öffnen von Hauptmenüs in Apps durch Klicken auf ein hamburger icon. Ich kann nicht wirklich finden, wonach ich suche, vielleicht verwende ich nicht die richtige Terminologie.

Jede Hilfe wird geschätzt, Thx

B

6

Sie sind sich nicht sicher, welche Art von Lösung Sie benötigen, reines CSS, JS, jQuery usw., aber hier sind einige Links, die Ihnen den Einstieg erleichtern.

Suchen Sie nach "CSS-Seitenleiste verschieben" oder etwas in dieser Richtung

jQuery Beispiele

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/

CSS-Beispiel

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

Quellcode

Demo

Ich habe den CSS-Code (Beispiel von Amarnath) ein wenig geändert. Nur zu Testzwecken. Also ich kann die Funktion besser verstehen. Vielleicht kann es jemandem helfen ...

#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

Es tut uns leid, wenn es langweilig ist, aber hier ist noch ein weiteres Beispiel. Hier haben wir eine horizontal klappbare Bar:

#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;
}

Die Farben sind ein bisschen knusprig, aber dies dient der besseren Veranschaulichung. Prost!

0
peter70