JavaScript实现的多功能侧边导航菜单源码

最新推荐文章于 2024-05-13 10:42:27 发布
最新推荐文章于 2024-05-13 10:42:27 发布
阅读量2k 收藏 2
点赞数
分类专栏： 前端源码 文章标签： javascript 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mazai5080/article/details/124372344
版权

大家好，今天给大家介绍一款，JavaScript实现的多功能侧边导航菜单源码（图1）。送给大家哦，获取方式在本文末尾。

图1

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

图2

图2

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

图3

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

图4

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

图5

本模板编码：10138，需要的朋友，关注文末公众号，搜索10138，即可获取。

<!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 rel="stylesheet" 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>

本模板编码：10138，需要的朋友，关注文末公众号，搜索10138，即可获取。

mazai5080
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html左侧导航滑动网页定位效果源码,JS网页侧边栏随网页滚动悬浮定位效果
weixin_39747721的博客
06-03 646
JS网页侧边栏随网页滚动悬浮定位效果发布时间：2015-12-02 09:09:32作者：佚名阅读：(279)相信大家见过很多很多wordpress博客都会有个侧边栏滚动定位效果，今天就给大家分享一个，闲话就不多说了，直接上代码：当拖动滚动条到第1个临界值时，一固定区域块以随页面滚动而一直显示在页面一固定的视觉区域;当拖动滚动条到第2个临界值时,这一固定区域块以“固定位置”的形式钉在页面上显示;当...
html如何实现侧边按钮,纯js侧边浮动按钮模块支持自定义(原创)
weixin_39887926的博客
06-10 712
插件描述：一个纯js侧边浮动按钮块插件，支持自定义主题颜色、图标、动画等更新时间：2020-01-1422:15:36更新说明：0、新增支持拖拽1、新增节点hover时颜色加深效果2、新增z-index参数3、新增扇形动画效果(fan-in)更新时间：2020-01-09 23:27:57float-module这是一个侧边浮动按钮块，纯js插件。无需依赖jquery，无需写html代码。开局仅...
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 4884
html+css+javascript+echarts设计的demo，快来学习吧
2024最新版TwoNav开源网址导航系统源码 | 新增模板/支持混搭,20+个主题模板
最新发布
m0_57941469的博客
05-13 642
2024最新版TwoNav开源网址导航系统源码 已过授权 所有功能可用测试环境：Nginx+PHP7.4+MySQL5.6一款开源的书签导航管理程序，界面简洁，安装简单，使用方便，基础功能免费。TwoNav可帮助你将浏览器书签集中式管理，解决跨设备、跨平台、跨浏览器之间同步和访问困难问题，做到一处部署，随处访问。功能特色：支持后台管理支持私有链接支持加密链接支持分享链接支持二级分类支持用户分组/权限管理支持Chrome/Firefox/Edge书签批量导入。
JavaScript 版文章自动创建目录导航菜单控件源代码，用来生成文章导航，可生成独立的侧边栏导航菜单
Python代码大全
12-14 826
可选，用来指定是否在文章标题位置生成锚点链接图标：true - 生成锚点链接图标，并给标题添加 ID 属性，false - 不生成锚点链接图标，仅给标题添加 ID 属性。可选，用来指定文章导读导航菜单的显示位置：outside - 生成侧边栏菜单，inside - 直接在文章正文区域的开始位置生成导航菜单。可选，用来指定是否文章导读导航菜单是否显示文章段落层次的索引编号：true - 显示编号，false - 不显示编号。可选，用来指定 article 节点下，要生成导航的标题标签的选择器。
js左侧菜单列表源码
05-09
js实现的左侧菜单列表 没有伸缩效果 但因为看样式挺好的，所以就上传了 有需要的同学可以看一下
js多功能侧边导航菜单插件.rar
10-01
【标题】"js多功能侧边导航菜单插件.rar"是一个包含JavaScript和CSS技术的网页组件，主要用于实现功能丰富的侧边导航菜单。这类插件在现代网页设计中非常常见，能够提供用户友好的交互体验，帮助访问者更方便地浏览...
jQuery侧边浮动多级导航菜单特效代码
03-20
总的来说，"jiaoben6119"这个文件可能包含了实现该特效的源代码，开发者可以通过查看和学习这些代码，了解其实现原理，并根据自己的需求进行修改和扩展。这个特效对于提高移动设备上的用户体验具有重要意义，尤其...
jQuery侧边导航锚点定位特效代码
03-20
在压缩包中，"使用帮助.txt"可能提供了详细的实现步骤和注意事项，"谷普下载.url"和"说明.url"可能是相关资源的链接，而"jiaoben6839"可能是源代码文件名。通过查看这些文件，你可以更深入地理解和应用这个jQuery...
一个非常好看的侧边菜单栏
08-26
标题中的“一个非常好看的侧边菜单栏”表明我们要讨论的是网页设计中的一种组件，即用于导航的侧边菜单。这种菜单通常在网页的左侧或右侧，提供网站的主要链接和子菜单，帮助用户轻松地在各个页面之间切换。设计时...
jQ侧边固定可折叠悬浮导航特效代码
03-20
"可折叠"功能意味着导航栏可以根据需要展开或收起，这样可以在有限的空间内显示更多的菜单项。这通常通过添加和移除类名，或者改变元素的CSS属性（如宽度、高度、透明度等）来实现。jQuery提供了方便的`.slideToggle...
js侧边栏导航菜单.zip
11-29
js侧边栏导航菜单，用css和JavaScript制作的简单网页界面，用法简单，通俗易懂，点击下载即可
轻量级响应式移动手机样式多级导航菜单jQuery插件
08-08
slinky是一款轻量级响应式移动手机样式多级导航菜单jQuery插件。它使用简单，可以创建多级嵌套的移动设计样式的导航菜单效果。
jQuery网站多级侧边栏导航菜单代码.zip
07-04
jQuery网站多级侧边栏导航菜单代码是一款在bootstrap样式的基础上，通过jQuery来为导航菜单绑定菜单点 击事件，生成非常漂亮的多级侧边栏导航菜单。
jQuery手机移动端垂直分类菜单导航切换代码.zip
07-11
jQuery手机移动端垂直分类菜单导航切换代码
适合移动手机的jQuery多级侧边栏菜单插件
12-11
hc-mobile-nav是一款适合移动手机的jQuery多级侧边栏菜单插件。它可以创建移动优先的、多级的隐藏滑动侧边栏菜单，支持折叠菜单、向下展开菜单和完全展开菜单等多种展示方式。
html的侧边栏实现代码
as953的博客
09-08 6490
侧边栏下拉 导航1 导航1 lol qq飞车 cf 导航2 导航2 淘宝 天猫 京东 导航3 导航3 食物 衣服 家具 导航4 导航4 电脑 鼠标 键盘 导航5 导航5 金属 塑料 合金 </div> <div id="main3"...
html+js制作侧边下拉导航栏菜单
勋勋勋勋小勋勋的博客
08-13 2920
有其他的方法可以一起交流学习n(*≧▽≦*)n 效果图：css样式自己设置哟 js: let index = 0; function generateDom(menusData,menusDom) { for(let menu in menusData) { let li ...
侧边菜单导航(JS+CSS)
若水弹丸之地
12-10 8809
效果展示：（1） （2）  （3）注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入        （2）注意修改引入的css和JS文件的路径HTML&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;SideBar Nav&lt;/title&gt; &lt;script type=...
php可折叠导航栏,Bootstrap实现可折叠分组侧边导航菜单
06-07
好的，关于可折叠导航栏的实现，可以使用 Bootstrap 的 Collapse 组件。 首先，需要引入 Bootstrap 的 CSS 和 JS 文件。然后，在 HTML 页面中创建一个容器，用于放置导航栏菜单。例如： ``` <div class="sidebar"> <ul class="nav"> <li> <a href="#">菜单项1</a> </li> <li> <a href="#">菜单项2</a> </li> <li> <a href="#submenu1" data-toggle="collapse">菜单项3</a> <ul id="submenu1" class="collapse"> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> </ul> </li> </ul> </div> ``` 上面的代码中，我们创建了一个容器 div.sidebar，其中包含一个 ul.nav 列表，用于放置导航栏菜单。第三个菜单项包含一个子菜单，它使用了 Collapse 组件。 接下来，需要添加一些 JavaScript 代码，用于初始化 Collapse 组件。例如： ``` <script> $(document).ready(function() { $('.collapse').collapse(); }); </script> ``` 上面的代码中，我们使用了 jQuery 的 ready() 函数，它会在页面加载完毕后执行。在该函数中，我们使用了 Collapse 组件的 collapse() 方法，对所有 class 为 collapse 的元素进行初始化。 现在，当用户点击菜单项3时，它的子菜单就会展开。当用户再次点击时，子菜单就会折叠起来。这样，我们就实现了一个可折叠的导航栏菜单。 希望这个回答能够帮到你。如果还有其他问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值