数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

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 - -

# スポンサードリンク

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 だけで作る フォトギャラリー・スライドショー


# スポンサードリンク