web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
一组时尚的侧边栏菜单和下拉列表UI设计
分类:
导航菜单
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 侧边栏的HTML结构使用在div中嵌套无序列表的HTML结构。 ```html
DASHBOARD
USERS
PRIORITY
COLLECTIONS
ARCHIVED
DELETED
TRENDS
TASKS
FILTERS
STATS
SETTINGS
``` select下拉列表的HTML结构如下: ```html
Select a branch
Group header
Filmore District
Mission District
Northshare Beach
Some other branch
``` 手风琴垂直下拉列表的HTML结构如下: ```html
GROUP 1
Item 1
...
GROUP 2
Item 1
...
GROUP 3
Item 1
...
``` ##### CSS样式 这3个UI组件的CSS样式都非常简单。其中侧边栏菜单的样式如下:它使用绝对定位来设置各个元素的位置,并给各个元素设置适当的大小,颜色和padding值。 ```html #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()方法来实现的。 ```html $('.sortable').sortable({ placeholder: 'ui-sortable-placeholder' }).find('li').append('
'); ``` 其它的操作都是在点击相应元素的时候使用toggleClass()来切换相应的class,以及显示和隐藏相应的元素。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告