這是一款非常時尚的可伸展的側邊欄菜單和select下拉列表以及手風琴式垂直下拉列表UI設計效果。它們通過簡單的CSS樣式設置，以及和jQuery，jqueryUI的配合，制作出非常時尚的web組件UI設計效果。
制作方法
HTML結構
側邊欄的HTML結構使用在
select下拉列表的HTML結構如下：
- Filmore District
- Mission District
- Northshare Beach
- Some other branch
手風琴垂直下拉列表的HTML結構如下：
GROUP 1
- Item 1
...
GROUP 2
- Item 1
...
GROUP 3
- Item 1
...
CSS樣式
這3個UI組件的CSS樣式都非常簡單。其中側邊欄菜單的樣式如下：它使用絕對定位來設置各個元素的位置，并給各個元素設置適當的大小，顏色和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;
}
最后為菜單列表中的每個元素設置一個背景圖像作為小圖標。
JAVASCRIPT
在垂直手風琴下拉列表效果中，每一個列表項都是可以用鼠標進行拖動排序的。這是通過jqueryUI的sortable()方法來實現的。
$('.sortable').sortable({ placeholder: 'ui-sortable-placeholder' }).find('li').append('');
其它的操作都是在點擊相應元素的時候使用toggleClass()來切換相應的class，以及顯示和隱藏相應的元素。
的解決方法)
...)
函數用法)
