ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    css のみで動作するスライドして現れるカラム ( アコーディオンメニュー? )

    css の解説サイトを覗いてたら、新しい発見がっ!( ゚д゚)ハッ!
    現在、公開している fc2 ブログテンプレート [ wi-blue-b ],[ wi-round-a ] では、
    右メニュー( カラム )の表示、非表示を、 javascript で css を操作することによって動作させている。

    こちらのサイトのサンプルをの覗いていると。。。コレって css だけで動作させる事が出来るんじゃ...。
    と思い、作成してみた。

    以下、 javascrit を使用せず css だけで右カラム ( メニュー ) が表示、非表示されるサンプルとソースコード。


    header
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet"  href="style.css">
            <script type="text/javascript" src="column.js"></script>
        </head>
        <body>
            <div id="wrapper">
                <header>
                </header>
                <section id="left_content">
                main_content
                </section><!--/left_content-->
                <section id="right_content">
                <!--
                    <div id="menu" style="width:100%;height:500px;background-color:green">
                    </div>
                -->
                    <div id="recommend_box">
                        <div id="recommend">
                            <ul>
                                <li>menu-a</li>
                                <li>menu-b</li>
                                <li>menu-c</li>
                            </ul>
                        </div><!--/recommend-->
                    </div><!--/recommend_box-->
                </section><!--/right_content-->
                <footer>
                footer
                </footer>
            </div>
         </body>
    </html>
                          
    • menu-a
    • menu-b
    • menu-c



    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
    
            *{
                padding:0;
                margin:0;
            }
            body{
            }
            #wrapper{
                width:80%;
                height:auto;
                padding:5px 0px;
                margin:auto;
            }
            header,footer{
                width:80%;
                height:auto;
                color:white;
                text-align:center;
                padding:40px 0px;
                margin:auto;
                background-color:black;
            }
            #content_box{
                width:80%;
                height:auto;
                white-space:nowrap;
                margin:auto;
                position:relative;
                overflow:hidden;
                background-color:dimgray;
            }
            #left_content *:not(pre):not(code),#right_content *:not(pre):not(code){
                white-space:normal;
            }
            #content_box > #toggle,#content_box > #toggle_skin{
                display:none;
            }
            #content_box > label{
                width:30px;
                height:30px;
                cursor:pointer;
                position:absolute;
                z-index:100;
                right:0px;
            }
            #left_content{
                width:75%;
                height:auto;;
                display:inline-block !important;
                background-color:gray;
            }
            #right_content{
                width:25%;
                height:auto;
                display:inline-block !important;
                opacity:1;
                background-color:darkgray;
                vertical-align:top;
            }
            #right_content > div > ul{
                padding:0px;
                margin:0px;
            }
            #right_content > div > ul > li{
                list-style-position:inside;
            }
            #left_content > div,#right_content > div{
                width:98%;
                height:auto;
                padding:10px;
                margin:auto;
                box-sizing: border-box;
                background-color:lightgray;
            }
            #toggle:checked ~ #left_content{
                width:100%;
            }
            #toggle:checked ~ #right_content{
                opacity:0;
            }
            #left_content,#right_content{
                transition:all .4s ease-in-out 0s;
                /*transition: all 1s ease;*/
            }
            #toggle_box{
                width:30px;
                height:30px;
                position:absolute;
                z-index:1;
                cursor:pointer;
            }
            #toggle_box:before{
                content:"";
                width:30px;
                height:30px;
                background-color:black;
                position:absolute;
                opacity:.8;
                border-radius:5px;
            }
            #toggle_box span{
                width:20px;
                height:4px;
                display:block;
                background-color:white;
                position:absolute;
                left:5px;
                -ms-transition:all 0.4s;
                -moz-transition:all 0.4s;
                -webkit-transition:all 0.4s;
                transition:all 0.4s;
            }
            #toggle_box span:first-child{
                top:7px;
                -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
                transform:translateX(0.5px) translateY(6px) rotate(45deg);
            }
            #toggle_box span:nth-child(2){
                margin-top:-2px;
                top:50%;
                opacity:0;
            }
            #toggle_box span:last-child{
                bottom:7px;
                -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
                transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
            }
            #toggle:checked ~ label > span:first-child{
                top:7px;
                -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
                -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
                -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
                transform:translateX(0px) translateY(0px) rotate(0deg);
            }
            #toggle:checked ~ label > span:nth-child(2){
                margin-top:-2px;
                top:50%;
                opacity:1;
            }
            #toggle:checked ~ label > span:last-child{
                bottom:7px;
                -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
                -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
                -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
                transform:translateX(0px) translateY(0px) rotate(0deg);
            }
            pre,code{
                overflow:auto;
            }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <header>
                    header
                </header>
                <div id="content_box">
                  <input type="checkbox" id="toggle" name="tg1">
                  <!--<input type="checkbox" id="toggle_skin" name="tg1">-->
                  <label for="toggle" id="toggle_box">
                        <span> </span>
                        <span> </span>
                        <span> </span>
                  </label>
                  <section id="left_content">
                          <pre><code>
    
            *{
                padding:0;
                margin:0;
            }
            body{
            }
            #wrapper{
                width:80%;
                height:auto;
                padding:5px 0px;
                margin:auto;
            }
            header,footer{
                width:80%;
                height:auto;
                color:white;
                text-align:center;
                padding:40px 0px;
                margin:auto;
                background-color:black;
            }
            #content_box{
                width:80%;
                height:auto;
                white-space:nowrap;
                margin:auto;
                position:relative;
                overflow:hidden;
                background-color:dimgray;
            }
    
                          </code></pre>
                  </section><section id="right_content">
                      <div>
                        <ul>
                            <li>menu-a</li>
                            <li>menu-b</li>
                            <li>menu-c</li>
                            <li>menu-d</li>
                            <li>menu-e</li>
                            <li>menu-f</li>
                            <li>menu-g</li>
                            <li>menu-h</li>
                            <li>menu-i</li>
                            <li>menu-j</li>
                        </ul>
                      </div>
                  </section>
                </div>
                <footer>
                    footer
                </footer>
            </div>
        </body>
    </html>
    


    こちらのサイト様のサンプルを参考にさせて頂きました。 → css だけで作る フォトギャラリー・スライドショー


    2016/03/24 [00:17]

    カウンター

    プロフィール

    negotoy

    Author:negotoy
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    02 | 2016/03 | 04
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -


    PAGE TOP
    広告: