How to make the HTML5 mobile phone pop up the mask menu special effect-H5 Tutorial-php.cn

How to make the HTML5 mobile phone pop up the mask menu special effect

不言

Release： 2018-06-09 17:14:47

Original

3508 people have browsed it

This article will share with you the html5 pop-up mask menu on the mobile phone. By clicking to display the menu, the menu will pop up. The effect is very beautiful. Friends who are interested in the knowledge about html5 pop-up mask menu should learn together. The rendering is as follows:

The code is as follows:

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=">
<meta name="viewport" content="width=device-width, initial-scale=.">
<title>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起</title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/html//reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="http://hovertree.com/texiao/html//style.css"> <!-- Resource style -->
<!--[if IE]>
<script src="http://hovertree.com/texiao/html//htmlshiv.min.js"></script>
<![endif]-->
</head>
<body>
<p class="sucaihuo-container">
<section class="cd-section">
<a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">显示菜单</a>
</section>
<p><a href="http://hovertree.com/h/bjaf/menulayer.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>
</p>
<p class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="http://hovertree.com/">首页</a></li>
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/menu/php/">PHP</a></li>
<li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li>
<li><a href="http://hovertree.com/texiao/easysector/">饼图</a></li>
<li><a href="http://tool.hovertree.com/">工具</a></li>
</ul>
</nav>
<a href="#" class="cd-close" target="_self">关闭菜单</a>
</p>
</p>
<script src="http://hovertree.com/ziyuan/jquery/jquery-...min.js"></script>
<script src="http://hovertree.com/texiao/html//main.js"></script> <!-- Resource jQuery -->
</body>
</html>

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone Learning will be helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML table layout

How to call the sharing interface on the WeChat html5 page

HTML5 page to implement messages and replies

The above is the detailed content of How to make the HTML5 mobile phone pop up the mask menu special effect. For more information, please follow other related articles on the PHP Chinese website!