手机侧滑导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>移动端页面侧边导航滑入效果 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="http://hovertree.com/texiao/mobile/2/hvtmoblilecss2.css">
<style>a{color:white}</style>
</head>
<body>

<div class="wrapperhovertree">
<div class="container">
<header>
<h1><a href="javascript:;" class="slide-menu" target="_self"><img src="http://hovertree.com/texiao/mobile/2/menu.png" alt=""></a>HoverTree Menu</h1>
</header>
<div class="imgbox">
<div>请点击左上角图标,菜单将从左侧滑出。<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/i1qo2kg6.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a></div>
<img src="http://hovertree.com/texiao/mobile/2/img1.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img2.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img3.jpg" alt="">

</div>
</div>
</div>

<!-- 侧边导航 -->
<div class="slide-mask"></div>
<aside class="slide-wrapper">
<div>
<div>
<strong>HoverTree</strong>
</div>
<ul>
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/menu/javascript/">JavaScript</a></li>
<li><a href="http://hovertree.com/menu/html5">HTML5</a></li>
<li><a href="http://hovertree.com/menu/css">CSS</a></li>
<li><a href="http://hovertree.com/menu/mobile/">移动Web</a></li>
<li><a href="http://hovertree.com/menu/texiao/">网页特效</a></li>
<li><a href="http://tool.keleyi.com/">工具</a></li>
<li><a href="http://keleyi.com/">柯乐义</a></li>
<li><a href="http://hovertree.com/guestbook/">留言</a></li>
</ul>
</div>
</aside>
<footer>
hovertree.com 2014-2015
</footer>
<script>
$(function(){
$('aside.slide-wrapper').on('touchstart', 'li', function(e){
$(this).addClass('current').siblings('li').removeClass('current');
});

$('a.slide-menu').on('click', function(e){
var wh = $('div.wrapperhove'+'rtree').height();
$('div.slide-mask').css('height', wh).show();
$('aside.slide-wrapper').css('height', wh).addClass('moved');
});

$('div.slide-mask').on('click', function(){
$('div.slide-mask').hide();
$('aside.slide-wrapper').removeClass('moved');
});
});
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:用MenuView控件仿钉钉APP的首页菜单

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

15120
来自专栏freesan44

pushViewController自定义动画

CATransition*transition = [CATransitionanimation];

14110
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

29620
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

15820
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

36350
来自专栏Android学习之路

seekbar

18470
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

34980
来自专栏一个爱瞎折腾的程序猿

自定义滚动条样式(layui.v1)

69810
来自专栏前端儿

图片轮播(左右切换)--JS原生和jQuery实现

左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

1.1K20
来自专栏编程微刊

微信小程序实现运动步数排行(可删除)

20330

扫码关注云+社区

领取腾讯云代金券