html5实现手机侧边栏导航完美滑动伸缩效果

 代码如下 复制代码

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>Epsilon Mobile Framework - Version 2.0</title>

<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/framework.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.swipebox.js"></script>
<script type="text/javascript" src="scripts/snap.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script type="text/javascript" src="scripts/framework.launcher.js"></script>

</head>
<body>

<div id="preloader">
 <div id="status">
     <p class="center-text">
   Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>

<div class="all-elements">
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="navigation-items">
                <div class="nav-item">
                    <a href="index.html" class="home-nav">Home<em class="selected-nav"></em></a>
                </div>
                <div class="nav-item">
                    <a href="#" class="features-nav submenu-deploy">Features<em class="dropdown-nav"></em></a>
                    <div class="nav-item-submenu">
                     <a href="intro.html">Introduction  <em class="unselected-sub-nav"></em></a>
                        <a href="type.html">Typography    <em class="unselected-sub-nav"></em></a>
                        <a href="jquery.html">jQuery   <em class="unselected-sub-nav"></em></a>
                    </div>
                </div>
                <div class="nav-item">
                    <a href="contact.html">Contact<em class="unselected-nav"></em></a>
                </div>
                <div class="nav-item">
                    <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a>
                </div>
                <div class="sidebar-decoration"></div>
            </div>
        </div>
    </div>

    <div id="content" class="page-content">
     <div class="page-header">
         <a href="#" class="deploy-sidebar"></a>
            <p class="bread-crumb">welcome</p>
            <a href="contact.html" class="deploy-contact"></a>
        </div>
        <div style="height:1280px;"></div>
    </div>
</div>

</body>
</html>

友情提示,这里上面头部有调用很多的js代码,大家可百度一个个下载吧,这里我就不提供js代码了哦。

时间: 2024-08-03 16:00:41

html5实现手机侧边栏导航完美滑动伸缩效果的相关文章

mfc cscrollview-MFC中CScrollView隐藏滚动条好,是否能模拟拖动界面?就像手机里面拖动页面滑动那种效果

问题描述 MFC中CScrollView隐藏滚动条好,是否能模拟拖动界面?就像手机里面拖动页面滑动那种效果 100C 如题(垂直滚动条),隐藏滚动条后,目前是模拟鼠标拖拽:响应OnVscroll()设置滚动条偏移位置,还是无法滚动视图.求解. 解决方案 试试不隐藏滚动条能不能成功,还有你的流程没太看懂.

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS_javascript技巧

绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码_javascript技巧

本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

jQuery+HTML5实现手机摇一摇换衣特效_jquery

手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果. 注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHP,MySQL等相关方面的基础知识. HTML 我页面中默认展示产品信息(某品牌连衣裙产品图片和文字说明),当然实际应用中可以从数据库中获取产品信息. <div id="pro" rel="1"> <p>使

移动手机APP导航菜单设计方案

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机APP导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感. 这5种APP菜单设计方案也许有很多设计师已经在使用,但不能否认它是目前实用的,而且能提高用户体验的菜单设计方案.下面摘选移动手机UI设计美观.时尚,希望你看了后会有灵感收获,能把你的菜单设计得更棒,好好学习吧:) APP导航设计类型: 列表式菜单 矩阵.网格式菜单

新闻-html5自适应手机屏幕问题

问题描述 html5自适应手机屏幕问题 在网上复制一段新闻到我的后台,结果前台手机端显示的效果却是这样的,普通文字根据我设置的宽度100%可以,但是那些数字却不管怎么设都是会溢出,不知道怎么回事,我自己写的数字也会溢出,还有图片也是,因为是从后台拿过来的数据,我又不能直接操作它们.求大神解答! 解决方案 容器增加css word-wrap: break-word;word-break:break-all; 解决方案二: 图片的话 img { max-width: 100%; } 数字或英文溢出

android手机虚拟导航栏屏幕适配

问题描述 android手机虚拟导航栏屏幕适配 两款手机都是1080*1920的分辨率,一个手机又导航栏,一个手机没有,请问怎么适配 解决方案 http://www.cocoachina.com/bbs/read.php?tid-224081.htmlhttp://www.cnblogs.com/error404/p/3815739.html 解决方案二: 如果是适配这两个手机,你就用dp够了,然后多用match_parent和weight 解决方案三: android 手机屏幕适配Androi

关于这个手机滑动解锁效果为什么会限制不了,

问题描述 关于这个手机滑动解锁效果为什么会限制不了, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机解锁效果</title> <style type="text/css"> #phone{ position:relative; width:426px; height: