CSS3小清新下拉列表 簡易大方

2021-09-06 15:08:03 字數 1430 閱讀 7582

之前有分享過幾款css3選單和jquery選單，像這款html5/css3自定義下拉框 3d卡片摺疊動畫3d效果非常華麗，這次要分享的這款相對比較簡單，很適合用在使用者的操作面板上。先來看看效果圖：

怎麼樣，無論從顏色還是結構都非常簡單清新吧。

你也可以到這裡來看看這款下拉列表的demo演示。

接下來我們一起看看選單的源**，主要是css**，只有下拉的功能用了幾行jquery**。

先來看看html結構：

<


div 


class


="content"


>


<


div 


class


="mainbar"


>


<


div 


id="liked"


>liked


div>


<


div 


id="listen"


>listen


div>


<


div 


id="cog"


class


="fa fa-cog"


>


div>


div>


<


div 


class


="menu"


>


<


p id


="messages"


>messages


p>


<


p>dashboard


p>


<


p>recent activity


p>


<


p>unlike


p>


div>


div>
然後是css**：

/*


bar 


*/.mainbar


#liked, #listen, #cog


#liked #listen #cog #liked, #listen #liked:before #listen:before #cog:after #liked:hover, #listen:hover, #cog:hover 


/*menu 


*/.menu


.menu p .menu p:after


.menu p:hover:after .menu p:hover
這裡分兩部分，乙個是上面的功能選單部分，另乙個是下拉的那部分，實現其實都非常簡單。

最後還有一段實現下拉效果的jquery**：

$(document).ready(function


());


});

CSS3學習 下拉列表

doctype html html head title 下拉列表例項 runoob.com title meta charset utf 8 style 容器 需要定位下拉內容 dropdown 下拉按鈕樣式 dropdownbtn 下拉內容 預設隱藏 dropdown content 下拉列表的...

CSS3實現下拉列表的功能

想要實現這種效果，方法很多，不借用js，只用css便可以實現。先寫好基本的結構 比如這樣的 然後開始編寫css 實現下拉的操作 先對dropdown設定個相對定位，後面好操作 dropdown這段 就是為了設定那個向下的箭頭 dropdown before這段 是設定下拉的面板，初始隱藏起來 dro...

CSS3製作Dropdown下拉列表的方法

target 是css3 中新增的乙個偽類，用以匹配當前頁面的uri中某個標誌符的目標元素 比如說當前頁面url下新增 comment就會定位到id comment 的位置，俗稱錨 css3 為這個動作賦予了更加多的功能 就如同 hover 一樣你可以做一些樣式定義。先上效果圖 正如標題所說，本文是...