SoFunction
Updated on 2025-04-05

layUI realizes the effect of three-level navigation menu

This article shares the specific code for layUI implementation of the three-level navigation menu for your reference. The specific content is as follows

Without further ado, just upload the code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>layout Backstage layout - Layui</title>
 <link rel="stylesheet" href="../css/" rel="external nofollow" >
 <script src="../"></script>
 <style>
 .layui-layout-left{position: absolute !important; left: 0px; top: 0;}
 /*layui child nav*/
 .layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-child a{color: white;}
 .layui-nav .layui-nav-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-child dd{position: relative;}
 .layui-nav-child -this{background-color: transparent; color: white;}
 .layui-nav .layui-nav-child -this a{background-color: transparent; color: white;}
 .layui-nav-child -this:after{display: none;}
 /*layui third level nav*/
 .layui-nav-third-child{display: none; position: absolute; left: 105px;top:25px;min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-third-child a{color: white;}
 .layui-nav .layui-nav-third-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-third-child li{position: relative;}
 .layui-nav-third-child li{background-color: transparent; color: white;}
 .layui-nav .layui-nav-third-child -this a{background-color: transparent; color: white;}
 .layui-nav-third-child li:after{display: none;}
 </style>
</head>
<body class="layui-layout-body ">
<div class="layui-layout layui-layout-admin layui-bg-blue">

 <div class="layui-header layui-bg-blue">
  <div style="margin-left: 20px">
  <b style="font-size: 35px">Shipin Confidential Security and Security Comprehensive Control Platform</b><br>
  <b>CSIT integrated Control System of Confidentiality and Security</b>

  </div>
 <!-- Head area（Can cooperatelayuiAlready horizontal navigation） -->

 <ul class="layui-nav layui-layout-right">
  <li class="layui-nav-item">
  <a href="javascript:;" >
   <img src="/RCzsdCq" class="layui-nav-img">
   Virtuous heart
  </a>
  <dl class="layui-nav-child">
   &lt;dd&gt;&lt;a href="#" >Basic Information</a></dd>   &lt;dd&gt;&lt;a href="#" >Security Settings</a></dd>  &lt;/dl&gt;
  &lt;/li&gt;
  &lt;li class="layui-nav-item"&gt;&lt;a href=""&gt;Retreat&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div class="layui-header layui-bg-blue"&gt;
 &lt;!-- Head area（Can cooperatelayuiAlready horizontal navigation） --&gt;
 &lt;ul class="layui-nav layui-layout-left"&gt;
  &lt;li class="layui-nav-item"&gt;&lt;a href="#" >Console</a></li>  &lt;li class="layui-nav-item"&gt;&lt;a href="#" >Commodity Management</a></li>  &lt;li class="layui-nav-item"&gt;&lt;a href="#" >User</a></li>  &lt;li class="layui-nav-item"&gt;
  &lt;a href="javascript:;" &gt;Other systems&lt;/a&gt;
  &lt;dl class="layui-nav-child layui-bg-blue"&gt;
   &lt;dd&gt;&lt;a href=""&gt;Email Management&lt;/a&gt;&lt;/dd&gt;
   &lt;dd&gt;&lt;a href=""&gt;Message management&lt;/a&gt;&lt;/dd&gt;
   &lt;dd&gt;&lt;a href=""&gt;Authorization Management&lt;/a&gt;&lt;/dd&gt;
   &lt;dd&gt;
   &lt;a href="javascript:;" class="third-class"&gt;Other systems2&lt;/a&gt;
   &lt;ol class="layui-nav-third-child layui-bg-blue"&gt;
    &lt;li&gt;&lt;a href=""&gt;Email Management2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Message management2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Authorization Management2&lt;/a&gt;&lt;/li&gt;
   &lt;/ol&gt;
   &lt;/dd&gt;
   &lt;dd&gt;
   &lt;a href="javascript:;" class="third-class"&gt;Other systems3&lt;/a&gt;
   &lt;ol class="layui-nav-third-child layui-bg-blue"&gt;
    &lt;li&gt;&lt;a href=""&gt;Email Management3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Message management3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Authorization Management3&lt;/a&gt;&lt;/li&gt;
   &lt;/ol&gt;
   &lt;/dd&gt;

  &lt;/dl&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div class="layui-body"&gt;
 &lt;!-- Content main area --&gt;
 &lt;div style="padding: 15px;"&gt;Content main area&lt;/div&gt;
 &lt;/div&gt;

 &lt;div class="layui-footer"&gt;
 &lt;!-- Bottom fixing area --&gt;
 ©  - Bottom fixing area
 &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
//JavaScript code area (['element','jquery'], function(){
 var element = ,$=;
 $(".layui-nav-third-child").hide();
 $(".third-class").on('click',function () {
  $(".layui-nav-third-child").hide();
  $(this).next().show();
 });
 });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

In style, the global style of layui is rewritten. In order to adjust the required color, it can be ignored. The idea is to control the display relationship of third-child to achieve the purpose of the third-child menu according to the display relationship of layui style. If you need to refer to the small arrow, just introduce layui-tab-more. It is recommended to check out its implementation method. As a javaer, I didn’t expect that the small triangle can be implemented so simply.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.