原生js书写纵向导航三级菜单demo（附代码）

最新推荐文章于 2024-06-04 21:34:50 发布

半糖学前端

最新推荐文章于 2024-06-04 21:34:50 发布

阅读量1k

点赞数 2

分类专栏： JavaScript入门到高级文章标签：微信 html5 小程序

本文链接：https://blog.csdn.net/m0_49262795/article/details/120184982

版权

JavaScript入门到高级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有梦想，有干货，微信搜索【半糖学前端】关注这个生活有点苦的半糖。

先来看下demo的样子：

大概就是这个样子了，很简单。为什么写这个demo呢？

主要是最近的项目用到了一个这样的功能，而我们已经很习惯的找组件

像什么elementUi，BJui等一些UI框架都有这样的功能

人家封装好的直接就拿来用了，平时为了工作效率也就那样做了

但是后面呢就想不用框架也写一个demo吧，万一谁能用到呢

所以就有了今天的例子了，话不多说，直接上代码

html部分

<div class="menuheightscrollY">
   <div class="close" id="toggle_menu_btn">
       <button id="toggle_btn">收起</button>
   </div>
   <ul class="menu_box expended" id="menu_box">
   </ul>
</div>

css部分

li{
    list-style: none;
}
.menuheightscrollY{
    width: 180px;
    background: #eee;
    margin-left: 20px;
}
.menu_box{
    margin: 0;
    padding: 0;
}
.menu_item{
    line-height: 50px;
    cursor: pointer;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    text-align: left;
}
.menu_item:hover{
    border-bottom: 1px solid #16a96a;
    border-top: 1px solid #16a96a;
    background: #f1faf7;
}
#toggle_menu_btn{
    text-align: right;
    line-height: 40px;
    border-bottom: 1px solid #16a96a;
}
#toggle_menu_btn button{
    cursor: pointer;
    padding: 2px 16px;
}
.menu_icon{
  display: inline-block;
  width: 40px;
}
/* 二级菜单 */
.sub_menu_box {
	display: none;
	background: #fafafa;
	padding: 0px;
	margin: 0px;
	background: -webkit-linear-gradient(top, #fff, #eaeaea);
	background: -moz-linear-gradient(top, #fff, #eaeaea);
	background: -ms-linear-gradient(top, #fff, #eaeaea);
	background: linear-gradient(top, #fff, #eaeaea);
}
.sub_menu {
    cursor: pointer;
    font-size: 14px;
    margin-left: 0;
    height: 40px;
    line-height: 40px;
    text-align: left;
    color: #333;
    padding-left: 40px;
    background: #fff;
    border-right: 3px solid #fff;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
  }
  
  .sub_menu:hover:before {
    content: "";
    position: absolute;
    right: 0px;
    margin-top: -6px;
    top: 50%;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #16a96a;
  }
  
  .sub_menu:hover {
    border-bottom: none;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    color: #16a96a;
    border-right: 3px solid #16a96a;
  }
  
  .sub_menu.checked:before {
    content: "";
    position: absolute;
    right: 0px;
    margin-top: -6px;
    top: 50%;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #90cf5d;
  }
  
  .sub_menu.checked {
    padding-left: 3px;
    background: #fff;
    color: #16a96a;
    border-right: 3px solid #90cf5d;
  }
  /* 三级菜单 */
  .third_menu_box{
    display: none;
    padding-bottom: 8px;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}
.third_menu_box{
  width: 180px;
}
.menuheightscrollY .third_menu_box{
	display: none;
	padding-bottom: 8px;
}
  .third_menu {
    position: static;
    white-space: nowrap;
    transition: padding 0.3s;
    display: flex;
    align-items: center;
	  padding-left: 10px;
    color: #707070;
    padding-right: 10px;
}
.menuheightscrollY .third_menu_box.showing{
	position: fixed;
	top: 0;
	left: 0;
	min-width: 180px;
	margin-top: -1px;
	padding: 0 1px;
	background-color: #fff;
	box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e5e5;
	border-left: 0;
	border-radius: 0 3px 3px 0;
}
.menuheightscrollY .third_menu_box.showing > li:hover {
  background-color: #e0f4eb;
  color: #16a96a;
}

js部分

 // 一级菜单数据
        var menulist = [{ "menuNo": "01", "menuName": "用户管理" },
        { "menuNo": "02", "menuName": "数据管理中心" },
        { "menuNo": "03", "menuName": "公共管理" },
        { "menuNo": "04", "menuName": "结算服务" },
        { "menuNo": "05", "menuName": "客户管理" },
        { "menuNo": "06", "menuName": "投资管理" },
        { "menuNo": "07", "menuName": "中间业务" },
        { "menuNo": "08", "menuName": "流量监控" }]
        // 二级菜单数据
        var mainMenuNo = [
            {"parent_menuNo": "02","menuNo":"0201", "menuName": "个人业务"},
            {"parent_menuNo": "02","menuNo":"0202", "menuName": "一卡管理"},
            {"parent_menuNo": "02","menuNo":"0203", "menuName": "电子银行"},
            {"parent_menuNo": "02","menuNo":"0204", "menuName": "手机短信"},
            {"parent_menuNo": "01","menuNo":"0101", "menuName": "上网流量"},
            {"parent_menuNo": "08","menuNo":"0801", "menuName": "短信通知"},
            {"parent_menuNo": "03","menuNo":"0301", "menuName": "手机银行"},
            {"parent_menuNo": "05","menuNo":"0501", "menuName": "数字钱包"},
            {"parent_menuNo": "04","menuNo":"0401", "menuName": "金额查询"},
            {"parent_menuNo": "02","menuNo":"0205", "menuName": "待办任务"},
            {"parent_menuNo": "02","menuNo":"0206", "menuName": "个人查询"},
            {"parent_menuNo": "01","menuNo":"0102", "menuName": "密码重置"},
            {"parent_menuNo": "05","menuNo":"0502", "menuName": "流量开通"},
            {"parent_menuNo": "06","menuNo":"0601", "menuName": "数字金融"},
            {"parent_menuNo": "03","menuNo":"0302", "menuName": "电商入口"},
            {"parent_menuNo": "07","menuNo":"0701", "menuName": "倒车入库"},
            {"parent_menuNo": "08","menuNo":"0802", "menuName": "银行开户"},
            {"parent_menuNo": "08","menuNo":"0803", "menuName": "贷款业务"},
        ];
        // 三级菜单数据
        var ThirdMenuNo = [
            {"parent_menuNo": "0201","menuNo":"020101", "menuName": "个人业务"},
            {"parent_menuNo": "0201","menuNo":"020102", "menuName": "一卡管理"},
            {"parent_menuNo": "0203","menuNo":"020301", "menuName": "电子银行"},
            {"parent_menuNo": "0202","menuNo":"020201", "menuName": "手机短信"},
            {"parent_menuNo": "0101","menuNo":"010101", "menuName": "上网流量"},
            {"parent_menuNo": "0801","menuNo":"080101", "menuName": "短信通知"},
            {"parent_menuNo": "0301","menuNo":"030101", "menuName": "手机银行"},
            {"parent_menuNo": "0501","menuNo":"050101", "menuName": "数字钱包"},
            {"parent_menuNo": "0401","menuNo":"040101", "menuName": "金额查询"},
            {"parent_menuNo": "0201","menuNo":"020103", "menuName": "待办任务"},
            {"parent_menuNo": "0203","menuNo":"020302", "menuName": "个人查询"},
            {"parent_menuNo": "0101","menuNo":"010102", "menuName": "密码重置"},
            {"parent_menuNo": "0501","menuNo":"050102", "menuName": "流量开通"},
            {"parent_menuNo": "0601","menuNo":"060101", "menuName": "数字金融"},
            {"parent_menuNo": "0301","menuNo":"030102", "menuName": "电商入口"},
            {"parent_menuNo": "0701","menuNo":"070101", "menuName": "倒车入库"},
            {"parent_menuNo": "0803","menuNo":"080301", "menuName": "银行开户"},
            {"parent_menuNo": "0802","menuNo":"080201", "menuName": "贷款业务"},
        ];
        // 一级菜单
        var html = "";
        $.each(menulist, function (index, menu) {
            html += "<li class='menu_item' title=" + menu.menuName + "><div class='menu_text other' id='" + menu.menuNo + "'>";
            html += "<i title=" + menu.menuName + " class='menu_icon'></i>" + menu.menuName;
            html += "<i class=' expend_menu_btn'></i>"
            html += "</div></li>";
        })
        $("#menu_box").html(html);
        // 二级菜单
        $.each(menulist, function (index, menu) {
            getSecondMenu(mainMenuNo,menu.menuNo);
        })
       
        function getSecondMenu(mainMenuNo, tx_code) {
            var secondData = [];
            for (var i=0;i< mainMenuNo.length;i++) {
                var pid = mainMenuNo[i].parent_menuNo;
                if (pid == tx_code) {
                    secondData.push(mainMenuNo[i])
                }
            }
            var html = "<ul class='sub_menu_box'>";
            $.each(secondData, function (index, secondMenu) {
                var id = secondMenu.menuNo;
                var text = secondMenu.menuName;
                html += "<li class='sub_menu' id='" + id + "'>";
                html += id + "-" + text + "</li>";
            })
            html += "</ul>";
            var $subMenuBox = $(html)
            $("#" + tx_code).parent(".menu_item").append($subMenuBox);
            $.each(secondData, function (index, ThirdMenu) {
                getThirdMenu(ThirdMenuNo, ThirdMenu.menuNo);
            })
        }

        function getThirdMenu(ThirdMenuNo, secMenuNo) {
            var thirdData = [];
            for (var i=0;i< ThirdMenuNo.length;i++) {
                var pid = ThirdMenuNo[i].parent_menuNo;
                if (pid == secMenuNo) {
                    thirdData.push(ThirdMenuNo[i])
                }
            }
            var html = "<ul class='third_menu_box'>";
            $.each(thirdData, function (index, menu) {
                var id = menu.menuNo;
                var text = menu.menuName;
                html += "<li class='third_menu' id='" + id + "'>";
                html += id + "-" + text + "</li>";
            })
            html += "</ul>";
            var $thirdMenuBox = $(html)
            $("#" + secMenuNo).append($thirdMenuBox);
        }

        //三级菜单显示
        $(".sub_menu").hover(function () {
            $(".third_menu_box").removeClass("showing")
            var $thirdMenuBox = $(this).find(".third_menu_box");
            var y = $(this).offset().top;
            $thirdMenuBox.addClass("showing");
            var h = $(window).height()-y;
            var hei_md = h-$thirdMenuBox.outerHeight();
            var $topy = y-$thirdMenuBox.outerHeight()+40;
            if(hei_md<0){
                $thirdMenuBox.css({ "transform": "translate3d(200px, " + $topy+ "px, 0px)", "display": "block" });
            }else{
                $thirdMenuBox.css({ "transform": "translate3d(200px, " + y + "px, 0px)", "display": "block" });
            }
            
        }, function () {
            var $thirdMenuBox = $(this).find(".third_menu_box");
            $thirdMenuBox.removeClass("showing");
            $thirdMenuBox.attr({ "style": "" });
        });
        $("#toggle_btn").click(function () {
            var $menuBox = $("#menu_box");
            //
            if ($menuBox.hasClass("expended")) { //展开
                $(".menuheightscrollY").animate({ "margin-left": "-124px" }, 300, "linear");
                $menuBox.removeClass("expended");
                $('#toggle_btn').text('展开');
            } else {//折叠
                $(".menuheightscrollY").animate({ "margin-left": "20px" }, 300, "linear");
                $menuBox.addClass("expended");
                $('#toggle_btn').text('收起');
            }
        });
        $(".menu_text").click(function () {
            var $menuItem = $(this).parent(".menu_item");
            $menuItem.find(".sub_menu_box").slideToggle(300, function () {
                //控制菜单高度
                var height = $menuItem.next(".sub_menu_box").height();
            })
            $menuItem.siblings(".menu_item").find(".sub_menu_box").slideUp(300);
        });

代码块也可以看到基本呢比较简单，测试的时候记得引入jquery

数据定义部分大家就要灵活变化了，我这边是写死的测试数据

按这个写基本就是我们一开始图片看到的样子了，如果有需要的也可以根据自己的需求进行修改使用

能帮助到大家那就更好了，我是@半糖学前端，期待下次见面

半糖学前端

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生js书写纵向导航三级菜单demo（附代码）

有梦想，有干货，微信搜索【半糖学前端】关注这个生活有点苦的半糖。先来看下demo的样子：大概就是这个样子了，很简单。为什么写这个demo呢？主要是最近的项目用到了一个这样的功能，而我们已经很习惯的找组件像什么elementUi，BJui等一些UI框架都有这样的功能人家封装好的直接就拿来用了，平时为了工作效率也就那样做了但是后面呢就想不用框架也写一个demo吧，万一谁能用到呢所以就有了今天的例子了，话不多说，直接上代码html部分<div class=..
复制链接

扫一扫