帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+Pushy简单的幻灯片效果导航

帝国模板之家 2020-11-03 网页特效 评论

Pushy是一个超小的(大约1kb)jQuery插件,用于创建一个非画布的多级幻灯片面板导航,下面给出的示例是:单击切换按钮将从左侧滑出一个侧面板导航,并将主要内容推到右侧。

具体代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>使用jQuery+Pushy创建一个简单的幻灯片面板导航</title>
        <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/demo.css">
        <!-- Pushy CSS -->
        <link rel="stylesheet" href="css/pushy.css">
        <!-- jQuery -->
        <script src="js/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <header class="site-header push">头部</header>
        <!-- Pushy Menu -->
        <nav class="pushy pushy-left" data-focus="#first-link">
            <div class="pushy-content">
                <ul>
                    <li class="pushy-submenu">
                        <button id="first-link">Submenu 1</button>
                        <ul>
                            <li class="pushy-submenu">
                                <button>Sub-Submenu 1</button>
                                <ul>
                                    <li class="pushy-link"><a href="#">Item 1</a></li>
                                    <li class="pushy-link"><a href="#">Item 2</a></li>
                                </ul>
                            </li>
                            <li class="pushy-submenu">
                                <button>Sub-Submenu 2</button>
                                <ul>
                                    <li class="pushy-link"><a href="#">Item 1</a></li>
                                    <li class="pushy-link"><a href="#">Item 2</a></li>
                                </ul>
                            </li>
                            <li class="pushy-link"><a href="#">Item 1</a></li>
                            <li class="pushy-link"><a href="#">Item 2</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>Submenu 2</button>
                        <ul>
                            <li class="pushy-link"><a href="#">Item 1</a></li>
                            <li class="pushy-link"><a href="#">Item 2</a></li>
                            <li class="pushy-link"><a href="#">Item 3</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>Submenu 3</button>
                        <ul>
                            <li class="pushy-link"><a href="#">Item 1</a></li>
                            <li class="pushy-link"><a href="#">Item 2</a></li>
                            <li class="pushy-link"><a href="#">Item 3</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>Submenu 4</button>
                        <ul>
                            <li class="pushy-link"><a href="#">Item 1</a></li>
                            <li class="pushy-link"><a href="#">Item 2</a></li>
                            <li class="pushy-link"><a href="#">Item 3</a></li>
                        </ul>
                    </li>
                    <li class="pushy-link"><a href="#">Item 1</a></li>
                    <li class="pushy-link"><a href="#">Item 2</a></li>
                    <li class="pushy-link"><a href="#">Item 3</a></li>
                    <li class="pushy-link"><a href="#">Item 4</a></li>
                </ul>
            </div>
        </nav>
        <!-- Site Overlay -->
        <div class="site-overlay"></div>
        <!-- Your Content -->
        <div id="container">
            <!-- Menu Button -->
            <button class="menu-btn">&#9776; 菜单</button>
            <p>帝国模板之家-专注帝国cms开发8年时间,为用户提供帝国cms仿站,建站,网站模板制作,二次开发服务,合理收费,还有大量免费帝国cms模板下载,视频教程,努力为您节省建站成本和时间,联系QQ:463587341。</p>
        </div>
        <footer class="site-footer push">底部</footer>
        <!-- Pushy JS -->
        <script src="js/pushy.min.js"></script>
    </body>
</html>

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家。

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言