zoukankan      html  css  js  c++  java
  • 移动端页面侧边导航滑入效果

    效果体验: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>

    web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    20080619 SQL SERVER 输入 NULL 的快捷键
    20090406 Adobe的“此产品的许可已停止工作”错误的解决办法
    20080908 Office Powerpoint 2007 不能输入中文的解决办法
    20080831 ClearGertrude Blog Skin 's cnblogs_code class
    20080603 Facebook 平台正式开放
    20080519 安装 Microsoft SQL Server 2000 时提示 创建挂起的文件操作
    test
    Linux—fork函数学习笔记
    SOA的设计理念
    Why BCP connects to SQL Server instance which start with account of Network Service fail?
  • 原文地址:https://www.cnblogs.com/jihua/p/mobilemenu.html
Copyright © 2011-2022 走看看