web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
创意旋转式打开隐藏侧边栏UI界面设计
分类:
导航菜单
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 该侧边栏特效的HTML结构如下:.menu_toggle是侧边栏打开按钮,.menu_items是侧边栏菜单,main.content是页面内容。 ```html
Moar
Coffee
Please
...
...
``` ##### CSS样式 在CSS样式中,当用户点击了打开侧边栏按钮的时候,页面朱内容元素.content被添加了class .shazam,这时该元素被旋转了-30度,打开按钮被旋转了-20度。菜单的列表项开始时是被移动到屏幕之外的,这时被移动回原来的位置,并设置了每个列表项的动画延迟时间。这一系列的设置组成了旋转打开侧边栏的效果。 ```html .shazam .content { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } .shazam .menu_open { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } .shazam .menu_close { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .shazam .menu_items li { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .shazam .menu_items li:nth-child(2) { -webkit-transition-delay: .47s; transition-delay: .47s; } .shazam .menu_items li:nth-child(3) { -webkit-transition-delay: .48s; transition-delay: .48s; } ``` ##### Javascript 在jQuery代码中,主要为点击按钮添加和移除相应的class。 ```html var $page = $('.page'); $('.menu_toggle').on('click', function () { $page.toggleClass('shazam'); }); $('.content').on('click', function () { $page.removeClass('shazam'); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告