当前位置：
  1. 首页
  2. 免费综合资源
  3. 技术文章
  4. 正文

大家好，今天给大家介绍一款，JavaScript实现的多功能侧边导航菜单源码

图1

可以菜单在左边弹出，也可以设置菜单在右边弹出（图2）

图2

图2

可以设置为子菜单重叠样式（图3）

图3

可以设置为扩展样式（图4）

图4

可以设置为直接展开样式（图5）

图5

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>兼容手机移动端的多功能多级侧边导航菜单js插件</title>
    <!--演示页面样式，使用时可以不引用-->
    <link  href="static/css/demo.css">
</head>

<body>
    <div id="container">
        <header>
            <div class="wrapper cf">
                <nav id="main-nav">
                    <ul class="first-nav">
                        <li class="cryptocurrency">
                            <a href="#" target="_blank">Devices</a>
                            <ul>
                                <li><a href="#">Devices1</a></li>
                                <li><a href="#">Devices2</a></li>
                                <li><a href="#">Devices3</a></li>
                                <li><a href="#">Devices4</a></li>
                                <li><a href="#">Devices5</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="second-nav">
                        <li class="devices">
                            <a>Devices2</a>
                            <ul>
                                <li class="mobile">
                                    <a href="#">Mobile Phones</a>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </li>
                                <li class="television">
                                    <a href="#">Televisions</a>
                                    <ul>
                                        <li><a href="#">Flat Superscreen</a></li>
                                        <li><a href="#">Gigantic LED</a></li>
                                        <li><a href="#">Power Eater</a></li>
                                        <li><a href="#">3D Experience</a></li>
                                        <li><a href="#">Classic Comfort</a></li>
                                    </ul>
                                </li>
                                <li class="camera">
                                    <a href="#">Cameras</a>
                                    <ul>
                                        <li><a href="#">Smart Shot</a></li>
                                        <li><a href="#">Power Shooter</a></li>
                                        <li><a href="#">Easy Photo Maker</a></li>
                                        <li><a href="#">Super Pixel</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="magazines">
                            <a href="#">Magazines</a>
                            <ul>
                                <li><a href="#">National Geographic</a></li>
                                <li><a href="#">Scientific American</a></li>
                                <li><a href="#">The Spectator</a></li>
                                <li><a href="#">The Rambler</a></li>
                                <li><a href="#">Physics World</a></li>
                                <li><a href="#">The New Scientist</a></li>
                            </ul>
                        </li>
                        <li class="store">
                            <a href="#">Store</a>
                            <ul>
                                <li>
                                    <a href="#">Clothes</a>
                                    <ul>
                                        <li>
                                            <a href="#">Women's Clothing</a>
                                            <ul>
                                                <li><a href="#">Tops</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Trousers</a></li>
                                                <li><a href="#">Shoes</a></li>
                                                <li><a href="#">Sale</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">Men's Clothing</a>
                                            <ul>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">Trousers</a></li>
                                                <li><a href="#">Shoes</a></li>
                                                <li><a href="#">Sale</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">Jewelry</a>
                                </li>
                                <li>
                                    <a href="#">Music</a>
                                </li>
                                <li>
                                    <a href="#">Grocery</a>
                                </li>
                            </ul>
                        </li>
                        <li class="collections"><a href="#">Collections</a></li>
                        <li class="credits"><a href="#">Credits</a></li>
                    </ul>
                </nav>
<!--                 <h1>HC MobileNav</h1>
                <h2>jQuery plugin for creating toggled mobile multi-level navigations, allowing endless nesting of submenu elements.</h2> -->
                <a class="toggle">
                    <span></span>
                    Toggle Navigation
                </a>
            </div>
        </header>
        <main>
            <div class="wrapper">
                <div class="content">
                    <h4>选边</h4>
                    <div class="actions">
                        <div><a href="#" data-demo="{side:'left'}" class="button active">左边</a></div>
                        <div><a href="#" data-demo="{side:'right'}" class="button">右边</a></div>
                    </div>
                    <h4>关卡开放</h4>
                    <div class="actions">
                        <div><a href="#" data-demo="{levelOpen:'overlap', levelSpacing:40}" class="button active">重叠级别</a></div>
                        <div><a href="#" data-demo="{levelOpen:'expand', levelSpacing:25}" class="button">扩展级别</a></div>
                        <div><a href="#" data-demo="{levelOpen:false, levelSpacing:25}" class="button">展开层</a></div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="static/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="static/js/hc-mobile-nav.js"></script>
    <script>
    (function($) {
        var $nav = $('#main-nav');
        var $toggle = $('.toggle');
        var defaultData = {
            maxWidth: false,
            customToggle: $toggle,
            navTitle: 'All Categories',
            levelTitles: true
        };

        // we'll store our temp stuff here
        var $clone = null;
        var data = {};

        // calling like this only for demo purposes

        const initNav = function(conf) {
            if ($clone) {
                // clear previous instance
                $clone.remove();
            }

            // remove old toggle click event
            $toggle.off('click');

            // make new copy
            $clone = $nav.clone();

            // remember data
            $.extend(data, conf)

            // call the plugin
            $clone.hcMobileNav($.extend({}, defaultData, data));
        }

        // run first demo
        initNav({});

        $('.actions').find('a').on('click', function(e) {
            e.preventDefault();

            var $this = $(this).addClass('active');
            var $siblings = $this.parent().siblings().children('a').removeClass('active');

            initNav(eval('(' + $this.data('demo') + ')'));
        });
    })(jQuery);
    </script>
	<a href="https://smalltool.github.io/" style="display:none;"></a>
</body>

</html>

上一篇 kafka系列SpringBoot 中使用@KafkaListener详解与使用
下一篇 VScode离线安装插件的方法

相关文章