html优美界面左侧下拉,一组时尚的侧边栏菜单和下拉列表UI设计
這是一款非常時(shí)尚的可伸展的側(cè)邊欄菜單和select下拉列表以及手風(fēng)琴式垂直下拉列表UI設(shè)計(jì)效果。它們通過簡單的CSS樣式設(shè)置，以及和jQuery，jqueryUI的配合，制作出非常時(shí)尚的web組件UI設(shè)計(jì)效果。
制作方法
HTML結(jié)構(gòu)
側(cè)邊欄的HTML結(jié)構(gòu)使用在
中嵌套無序列表的HTML結(jié)構(gòu)。- DASHBOARD
- USERS
- PRIORITY
- COLLECTIONS
- ARCHIVED
- DELETED
- TRENDS
- TASKS
- FILTERS
- STATS
- SETTINGS
select下拉列表的HTML結(jié)構(gòu)如下：
Select a branchGroup header- Filmore District
- Mission District
- Northshare Beach
- Some other branch
手風(fēng)琴垂直下拉列表的HTML結(jié)構(gòu)如下：
GROUP 1
- Item 1
...
GROUP 2
- Item 1
...
GROUP 3
- Item 1
...
CSS樣式
這3個(gè)UI組件的CSS樣式都非常簡單。其中側(cè)邊欄菜單的樣式如下：它使用絕對定位來設(shè)置各個(gè)元素的位置，并給各個(gè)元素設(shè)置適當(dāng)?shù)拇笮?#xff0c;顏色和padding值。
#sidebar-menu{
background:#229bdc;
overflow:hidden;
border-radius:5px;
position:absolute;
top: 60px;
left: 0;
height:62 0px;
width:55px;
color:#abe2ff;
font-size:12px;
font-weight:900;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#sidebar-menu.animate{
width:210px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#toggleMenu{
background:#1888c4;
height:37px;
}
#toggleMenu .list{
position:absolute;
top: 12px;
cursor:pointer;
right: 8px;;
height:30px;
width:30px;
height:30px;
background:url("../img/toggle-list.png") 0 0 no-repeat;
}
#toggleMenu .thumbs{
position:absolute;
display:none;
top: 9px;
cursor:pointer;
right: 3px;
height:30px;
width:30px;
height:30px;
background:url("../img/toggle-thumbs.png") 0 0 no-repeat;
}
#sidebar-menu li{
background:url("../img/sidemenu-sprite.png") 0 0 no-repeat;
padding: 15px 0 15px 54px;
margin: 1px 4px 1px 4px;
list-style: none;
}
最后為菜單列表中的每個(gè)元素設(shè)置一個(gè)背景圖像作為小圖標(biāo)。
JAVASCRIPT
在垂直手風(fēng)琴下拉列表效果中，每一個(gè)列表項(xiàng)都是可以用鼠標(biāo)進(jìn)行拖動排序的。這是通過jqueryUI的sortable()方法來實(shí)現(xiàn)的。
$('.sortable').sortable({ placeholder: 'ui-sortable-placeholder' }).find('li').append('');
其它的操作都是在點(diǎn)擊相應(yīng)元素的時(shí)候使用toggleClass()來切換相應(yīng)的class，以及顯示和隱藏相應(yīng)的元素。
總結(jié)
以上是生活随笔為你收集整理的html优美界面左侧下拉,一组时尚的侧边栏菜单和下拉列表UI设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件版本扫盲
- 下一篇： 玩转oracle 11g（27）：ora