聯成電腦技術論壇

 找回密碼
 註冊
搜索
查看: 526|回復: 0

網頁設計教學:純CSS手風琴效果

[複製鏈接]
發表於 2019-5-29 10:49:00 | 顯示全部樓層 |閱讀模式
文、前端小編





剛接觸CSS的你,對於Javascript還尚未有深刻的認識,要怎麼做出下面如圖所示的手風琴效果呢?




這個使用範圍相當廣又簡單方便的效果:手風琴效果,一般網站可以用在選單、產品分類,或是新聞公告…等等,就看網站開發者要怎麼運用。現在就跟著我們一步一步來完成吧!

要達成不用JS來完成這個效果,我們要使用label可以點選控制input[type=radio]這項特性,並且要注意label要對應到相對的input[type=radio]的id




HTML:
    <body>
        <div class="accordion">
            <label for="tab1">1號</label>
            <div class="box">
                <input type="radio"name="tab" type="tab1">
            </div>
            <label for="tab2">2號</label>
            <div class="box">
                <input type="radio"name="tab" type="tab2">
            </div>
            <label for="tab3">3號</label>
            <div class="box">
                <input type="radio"name="tab" type="tab3">
            </div>
        </div>
    </body>



設定簡單的CSS,基本的CSS reset,body的背景有點顏色,這樣看得比較清楚。


CSS:
    * {         box-sizing : border-box;        
    }        
    body {               
        margin : 0px;               
        padding : 0px;               
        background-color : #ecfaff;        
    }        
    .accordion  {               
        width : 300px;               
        margin : 80px auto 0;      
    }        





接下來稍微將label做的比較像按鈕的樣子。


CSS:
    .accordion label {               
        display : block;               
        width : 100%;               
        text-align : center;               
        border-radius : 5px;               
        background-color : #ccc;               
        margin-top : 10px;               
        padding : 6px 12px;               
        cursor : pointer;        
    }        






然後在每一個input[type=radio]後面新增一塊div,class命名為content,並且設定CSS。


HTML:
    <body>                        
        <div class="accordion">                                
            <label for="tab1">1號</label>                                
            <div class="box">                                       
                <input type="radio" name="tab" id="tab1">                                       
                <div class="content">hello</div>                                
            </div>                                
            <label for="tab2">2號</label>                                
            <div class="box">                                       
                <input type="radio" name="tab" id="tab2">                                       
                <div class="content">hello</div>                                
            </div>                                
            <label for="tab3">3號</label>                                
            <div class="box">                                       
                <input type="radio" name="tab" id="tab3">                                       
                <div class="content">hello</div>                                
            </div>                        
        </div>               
    </body>        




CSS:

    .content {
               
        height : 100px;               
        background-color : #fff;        
    }        





再來,我們要使用這次重要的偽元素【:checked】與選擇器【+】【:checked】的功能為判定目前checkbox或radio是否有被選取,而【+】的功能是選擇緊鄰在後的下一個元素

下面範例的意思就是: 被選取的input[type=radio]的下一個 .content 背景變成橘色。


CSS:

    input[type=radio]:checked + .content {
               
        background-color : #fa0;        
    }        



想知道接下來前端小編怎麼做嗎?咱們繼續看下去... ►我想觀看全文





延伸閱讀
聯成電腦分享:早別人一步  滿足對創意的無限渴望
聯成電腦網頁設計教學:8個簡單的CSS Hover效果
聯成電腦網頁設計小知識:為何不能使用中文命名檔案?
聯成電腦網頁設計教學:一次搞懂CSS3選擇器
聯成電腦網頁設計教學:一次讓你搞懂SASS


官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w




您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



小黑屋|Archiver|手機版|聯成電腦技術論壇  

GMT+8, 2019-9-19 22:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表