html+js制作侧边下拉导航栏菜单

你的名字 2021-10-23 10:47 809阅读 0赞

有其他的方法可以一起交流学习n(\*≧▽≦\*)n

效果图：css样式自己设置哟

![2019081317092342.png][]                                             ![20190813170821899.png][]

js:

let index = 0;
    function generateDom(menusData,menusDom) {
        for(let menu in menusData) {
            let li = document.createElement('li');
            if(typeof(menusData[menu].subMenu)=="undefined" || menusData[menu].subMenu=="") {
                li.innerHTML = '<div class="navIcon">'+
                    '<svg class="icon iconStyle" aria-hidden="true">'+
                    '<use xlink:href="#'+menusData[menu].iconUrl+'"></use>'+
                    '</svg>'+
                    '<span class="fontStyle">'+menusData[menu].name+'</span>'+
                    '</div>';
            }
            else {
                index++;
                let svgId = "svg"+index;
                let iconUrl = "#"+menusData[menu].iconUrl;
                let iconUrlSpread = "#"+menusData[menu].iconUrlSpread;
                li.innerHTML = '<div class="navIcon" onclick="toggle(this,\''+iconUrl+'\',\''+iconUrlSpread+'\',\''+svgId+'\')">'+
                    '<svg class="icon iconStyle" aria-hidden="true">'+
                    '<use id="svg'+index+'" xlink:href="#'+menusData[menu].iconUrl+'"></use>'+
                    '</svg>'+
                    '<span class="fontStyle">'+menusData[menu].name+'</span>'+
                    '</div>';
                let ul = document.createElement('ul');
                li.appendChild(ul);
                ul.setAttribute("style","display:none");
                ul.classList.add("active");
                generateDom(menusData[menu].subMenu,ul);
            }
            menusDom.appendChild(li);
        }
    }
    
    function toggle(event,packUp,spread,svgId) {
        let iconInfo = [packUp,spread,svgId];
        let brother = event.nextElementSibling;
        showHidden(brother,event,iconInfo);
    }
    
    function showHidden(element,event,iconInfo) {
        let icon = document.getElementById(iconInfo[2]);
        if(element.style.display=="none") {
            element.setAttribute("style","display:block");
            icon.setAttribute("xlink:href",iconInfo[1]);
        }
        else  {
            element.setAttribute("style","display:none");
            icon.setAttribute("xlink:href",iconInfo[0]);
        }
    }

html页面使用js

let menusData = [
            {
                "iconUrl": "",
                "name": ""
            },
            {
                "iconUrl": "", //收起时的图标
                "iconUrlSpread": "",  //展开时的图标
                "name": "",
                "subMenu": [    //子菜单
                    {
                        "iconUrl": "icon-nasguanli",
                        "name": ""
                    },
                    {
                        "iconUrl": "icon-wenjianguanli",
                        "name": ""
                    }
                ]
            },
            {
                "iconUrl": "",
                "name": ""
            }
        ];
    
        $(function(){
            let ulId = document.getElementById('menus');
            generateDom(menusData,ulId);
        });

html:

<ul id="menus">
    </ul>

[2019081317092342.png]: https://img-blog.csdnimg.cn/2019081317092342.png
[20190813170821899.png]: /images/20211023/960246fe02b34f039f999fcba08acac4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，809人围观）

还没有评论，来说两句吧...

相关阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 375 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 343 阅读

相关 vue element menu侧边导航栏

<template>  <!--unique

港控/mmm°/ 2022年10月29日 14:25/ 0 赞/ 57 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 401 阅读

相关 html中绝对定位与侧拉菜单,网页中固定侧边栏

进行定位开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化当第一个li标签开启了绝对定位时，第一个li标签脱离了文档流下面的li标签往上移动 \/ p

左手的ㄟ右手/ 2022年10月06日 12:45/ 0 赞/ 224 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 337 阅读

相关侧边固定导航菜单监听滚动

jQuery实现的滚动侧边栏菜单，页面下滑时侧边栏会黏附在页面上，滚动版块时，对应菜单会点亮 PS：请注意避免包裹层因为float浮动的塌陷问题，建议使用\{overflow

喜欢ヅ旅行/ 2022年09月13日 05:23/ 0 赞/ 226 阅读

相关 Puma - jQuery&Css3侧边栏导航菜单插件_Js侧边导航插件

[下载地址][Link 1] Puma是一个功能强大的jQuery栏,看起来像一个应用程序。 ![7\_b130e9dc6ed2e7a23e6dd20d07701834.p

朱雀/ 2022年08月28日 09:53/ 0 赞/ 260 阅读

相关 html+js制作侧边下拉导航栏菜单

有其他的方法可以一起交流学习n(\≧▽≦\)n 效果图：css样式自己设置哟 ![2019081317092342.png][]

你的名字/ 2021年10月23日 10:47/ 0 赞/ 810 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 678 阅读