html优美界⾯左侧下拉,⼀组时尚的侧边栏菜单和下拉列表UI设
计
这是⼀款⾮常时尚的可伸展的侧边栏菜单和select下拉列表以及⼿风琴式垂直下拉列表UI设计效果。它们通过简单的CSS样式设置，以及和jQuery，jqueryUI的配合，制作出⾮常时尚的web组件UI设计效果。
制作⽅法
HTML结构
侧边栏的HTML结构使⽤在美食食谱网页界面ui设计灵感
中嵌套⽆序列表的HTML结构。
DASHBOARD
USERS
PRIORITY
COLLECTIONS
ARCHIVED
DELETED
TRENDS
TASKS
FILTERS
STATS
SETTINGS
select下拉列表的HTML结构如下：
Select a branch
Group header
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，以及显⽰和隐藏相应的
元素。