当前位置:首页 > 开发 > Web前端 > 前端 > 正文

移动端页面侧边导航滑入效果

发表于: 2015-06-06   作者:ini   来源:转载   浏览:
摘要: 效果体验:http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js,该版本的jQuery库是用于支持HTML5的浏览器上,不再兼容IE8以前的浏览器,现在移动端浏览器一般都支持HTML5,所以使用该jQuery没问题。HTML文件代码: <!DOCTYPE html> <h

效果体验:http://hovertree.com/texiao/mobile/2.htm

可以使用移动设备浏览器查看效果。
效果使用到jquery-2.1.4.min.js,该版本的jQuery库是用于支持HTML5的浏览器上,不再兼容IE8以前的浏览器,现在移动端浏览器一般都支持HTML5,所以使用该jQuery没问题。

HTML文件代码:

<!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="">
<img src="http://hovertree.com/texiao/mobile/2/img4.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img5.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img6.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img7.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img8.jpg" alt="">
<img src="http://hovertree.com/texiao/mobile/2/img9.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>

特效汇总: http://ini.iteye.com/blog/2165698

移动端页面侧边导航滑入效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: 1 <!DOCTYP
CSS3在线手册 http://www.php100.com/manual/css3_0/@font-face.shtml Sass基础——Rem与Px的转换 r
移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种: Native App(原生APP)
首先是html代码: <html> <head> <title>PopView</title> <script src=
首先是html代码: <html> <head> <title>PopView</title> <script src=
Weinre是什么 如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原
侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu、Side Navigation等。当然谷歌
一、安装 npm -g install weinre 二、启动服务器 weinre [options] //The server will run until yo
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字
时间过的飞快,转眼间做移动端已经将近两个月时间了,在这两个月中做了很多个页面,有js,jq,还有
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号