如何让HTML5手机端弹出遮罩菜单特效

时间2024-01-23 12:05:17发布访客分类HTML浏览725

导读：收集整理的这篇文章主要介绍了如何让HTML5手机端弹出遮罩菜单特效，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享htML5手机端弹出遮罩菜单，通过点击显示菜单，菜单会飞的弹出，效果非常漂亮，对html5弹出遮罩菜单相关知识...

收集整理的这篇文章主要介绍了如何让HTML5手机端弹出遮罩菜单特效，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享htML5手机端弹出遮罩菜单，通过点击显示菜单，菜单会飞的弹出，效果非常漂亮，对html5弹出遮罩菜单相关知识感兴趣的朋友一起学习吧效果图如下所示：

代码如下：

!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！