web-dev-qa-db-ja.com

折りたたみと折りたたみを行うサイドバーメニューのcss

私は、サイドバーメニューの横にあるホームボタンをクリックすることで折りたたんだり折りたたんだりできるサイトのシンプルなサイドバーメニューを作成する方法に関するチュートリアルを探していました。ハンバーガーアイコン。探しているものが本当に見つかりません。正しい用語を使用していない可能性があります。

助けてくれてありがとう、thx

B

cssmenusidebar
8
Justin Othername

純粋なCSS、JS、jQueryなど、どのようなソリューションが必要かはわかりませんが、ここに、開始するためのリンクをいくつか示します。

「CSSスライドアウトサイドバー」またはそれらの線に沿って何かを検索してみてください

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/

CSSの例

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

14
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

ソースコード

デモ

4
Amarnath Balasubramanian

私はcssコード（Amarnathの例）を少し変更しました。テスト目的のみ。そのため、関数をよりよく理解できます。多分それは誰かを助けることができます...

#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

退屈な場合は申し訳ありませんが、これはまだ別の例です。ここに水平に折りたたみ可能なバーがあります：

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

色は少しかみ傷であるが、これはよりよく説明するのに役立つ。乾杯！

0
peter70