html5⼿机端的点击弹出侧边滑动菜单代码
1<!doctype html>
2<html lang="zh">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>jQuery弹出侧边栏滑动菜单 - 何问起</title><base target="_blank"/>
8<link rel="stylesheet" href="hovertree/texiao/html5/19/css/reset.css">
9<link rel="stylesheet" href="hovertree/texiao/html5/19/css/style.css">
10
jquery弹出div窗口11<script language="javascript" src="hovertree/ziyuan/jquery/jquery-2.2.0.min.js"></script>
12<script language="javascript" src="js/main.js"></script>
13<!--[if IE]>
14<script src="hovertree/texiao/html5/4/html5shiv.min.js"></script>>
15<![endif]-->
16</head>
17<body>
18
19<main>
20<header class="header">
21<h1>jQuery弹出侧边栏滑动菜单<span>A Full-Screen Pushing Navigation</span></h1>
22<p>A full page menu, that replaces the current content by pushing it off the screen.</p>
23<p><a href="hovertree/">⾸页</a><a href="hovertree/texiao/">特效</a><a
href="hovertree/h/bjaf/manpingmenu.htm">原⽂</a>
24</p>
25</header>
26</main>
27
28<a href="#cd-nav" class="cd-nav-trigger">
29 Menu
30<span class="cd-nav-icon"></span>
31<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
32<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle> 33</svg>
34</a>
35
36
37<div id="cd-nav" class="cd-nav">
38<div class="cd-navigation-wrapper">
39<div class="cd-half-block">
40<h2>导航菜单</h2>
41
42<nav>
43<ul class="cd-primary-nav">
44<li><a href="hovertree/h/bjaf/menulayer.htm" class="selected">我的</a></li>
45<li><a href="hovertree/h/bjaf/easysector.htm">内容</a></li>
46<li><a href="hovertree/h/bjaf/jqguding.htm">消息</a></li>
47<li><a href="hovertree/h/bjaf/csshouse.htm">模板</a></li>
48<li><a href="hovertree/hvtart/bjae/ipblia78.htm">设置</a></li>
49<li><a href="hovertree/h/bjaf/tcpip_addressing.htm">关于</a></li>
50</ul>
51</nav>
52</div>
53
54<div class="cd-half-block">
55<address>
56<ul class="cd-contact-info">
57<li><a href="mailto:hovertree@hovertree">hovertree@hovertree</a></li>
58<li>021-********</li>
59<li>
60<span>何问起</span>
61<span>hovertree</span>
62<span>keleyi菜单</span>
62<span>keleyi菜单</span> 63</li>
64</ul>
65</address>
66</div>
67</div>
68</div>
69</body>
70</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。