css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单


Posted in HTML / CSS onSeptember 02, 2014

之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单。点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭。效果相当不错。效果图如下:
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单 

源码下载

这个实例由css3和依赖于jquery插件。下面是实现代码

html代码:

复制代码
代码如下:

<nav class="nav" role="navigation" style="height: 195px;">
<ul class="nav-items">
<li><a target=_blank href="http://www.w2bc.com">Home</a></li>
<li><a target=_blank href="http://www.w2bc.com">About</a></li>
<li><a target=_blank href="http://www.w2bc.com">Clients</a></li>
<li><a target=_blank href="http://www.w2bc.com">Contact Us</a></li>
</ul>
</nav>
<header style="-webkit-transform: translate3d(0px, 195px, 0px);">
<button class="menu-button-target active" data-ic-class="button-trigger">
<span class="menu-button"></span>
</button>
Example Header
</header>
<section>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
</section>

css3代码:
复制代码
代码如下:

*
{
box-sizing: border-box;
}
body
{
font-family: "HelveticaNeue-Light" , "Helvetica Neue Light" , "Helvetica Neue" , Helvetica, Arial, "Lucida Grande" , sans-serif;
font-weight: 300;
}
nav
{
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
left: 0;
transition: all 0.4s ease;
width: 100%;
background: #34495e;
height: 0;
overflow: hidden;
transition-delay: 0.25s;
}
.active nav
{
transition-delay: 0s;
}
nav ul
{
width: 95%;
margin: 0 auto;
}
nav ul li
{
padding: 5px;
border-bottom: 1px solid white;
}
nav ul li:nth-child(1) a
{
transition-delay: 0.1s;
}
nav ul li:nth-child(2) a
{
transition-delay: 0.15s;
}
nav ul li:nth-child(3) a
{
transition-delay: 0.2s;
}
nav ul li:nth-child(4) a
{
transition-delay: 0.25s;
}
nav ul li:last-child
{
border: none;
}
nav ul li a
{
transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
position: relative;
display: block;
text-decoration: none;
color: white;
font-size: 18px;
padding: 10px;
-webkit-transform: translate3d(100px, 0, 0);
opacity: 0;
}
.active nav ul li a
{
-webkit-transform: translateX(0);
opacity: 1;
}
header
{
transition: all 0.4s ease;
-webkit-transform: translate3d(0, 0, 0);
left: 0;
width: 100%;
position: fixed;
background: #27ae60;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
transition-delay: 0.25s;
}
.active header
{
transition-delay: .08s;
}
section
{
background: #f5f5f5;
padding-top: 80px;
}
article
{
background: white;
height: 500px;
width: 95%;
border-radius: 3px;
margin: 0 auto 20px auto;
border: 1px solid #e4e4e4;
}
.menu-button-target
{
background: transparent;
border: none;
outline: none;
cursor: pointer;
position: absolute;
z-index: 200;
left: 10px;
height: 50px;
top: 50%;
margin-top: -23px;
webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-button-target.active .menu-button
{
transition: background .2s ease;
background-color: transparent;
}
.menu-button-target.active .menu-button:before, .menu-button-target.active .menu-button:after
{
transition: top .3s ease, -webkit-transform .3s .2s ease;
}
.menu-button-target.active .menu-button:before
{
top: 0;
-webkit-transform: rotate(45deg);
}
.menu-button-target.active .menu-button:after
{
top: 0;
-webkit-transform: rotate(-45deg);
}
.menu-button
{
position: relative;
top: 50%;
left: 0;
display: block;
width: 40px;
height: 4px;
margin-top: -2px;
background-color: white;
border-radius: 10px;
transition: background .2s .2s;
}
.menu-button:before, .menu-button:after
{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
background-color: white;
transition: top .3s .2s ease, -webkit-transform .3s ease;
border-radius: 10px;
-webkit-transform-origin: 50% 50%;
}
.menu-button:before
{
top: -10px;
-webkit-transform: rotate(0deg);
}
.menu-button:after
{
top: 10px;
-webkit-transform: rotate(0deg);
}

js代码:
复制代码
代码如下:

var $menuTrigger = $('[data-ic-class="button-trigger"]'),
$menuOverlay = $('[data-ic-class="overlay"]'),
$menuItem = $('.menu-item'),
activeClass = 'active',
$nav = $('nav'),
$navULHeight = $('.nav-items').outerHeight(),
navOpen = false,
$header = $('header');
var isTouch = false;
if ($('html').hasClass('touch')) {
isTouch = true;
}
function menuFunction() {
$menuTrigger.toggleClass(activeClass);
if (!navOpen) {
$nav.height($navULHeight);
navOpen = true;
$('body').addClass('active');
$header.css('transform', 'translate3d(0, ' + $navULHeight + 'px, 0)');
} else {
$nav.height(0);
$header.css('transform', 'translate3d(0, 0, 0)');
navOpen = false;
$('body').removeClass('active');
}
}
if (isTouch) {
$menuTrigger.on('touchstart', function () {
menuFunction();
});
}
if (!isTouch) {
$menuTrigger.on('click', function () {
menuFunction();
});
}
HTML / CSS 相关文章推荐
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 #HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 #HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 #HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 #HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP实现倒计时功能
2020/11/16 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python with (as)语句实例详解
2020/02/04 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
实习生个人找工作的自我评价
2013/10/30 职场文书
门卫岗位职责
2013/11/15 职场文书
给学校的建议书
2014/03/12 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫