How to use two menu pages in layui

You can use multiple Menu pages in Layui as follows: Create multiple <ul> elements, each element represents a Menu page. Nested <ul> elements combine Menu pages, and the nested elements become sub-Menu pages. Specify the Menu element to use when initializing Layui. Make sure that child Menu pages have unique identifiers and use <dl> elements to nest <dd> elements.

Layui How to use two Menu pages

Use multiple Menu pages

In Layui, you can use multiple Menu pages by creating multiple <ul> elements. Each <ul> element represents a Menu page.

Merge multiple Menu pages

To merge multiple Menu pages, you need to nest the <ul> element in another <ul> element. The nested <ul> element will become a child Menu page.

Example code

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="javascript:;">菜单 1</a>
    <dl class="layui-nav-child layui-anim layui-anim-upbit">
      <dd><a href="javascript:;">子菜单 1-1</a></dd>
      <dd><a href="javascript:;">子菜单 1-2</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">菜单 2</a>
    <dl class="layui-nav-child layui-anim layui-anim-upbit">
      <dd><a href="javascript:;">子菜单 2-1</a></dd>
      <dd><a href="javascript:;">子菜单 2-2</a></dd>
    </dl>
  </li>
</ul>

Initialization

When initializing Layui, you need to specify the Menu element to be used.

layui.use('element', function() {
  var element = layui.element;
  element.init();
});

Usage Notes

<ul>

Ensure that nested <ul> elements have layui-nav-childkind.

The <dd> element of the sub-Menu page must be nested within the <dl> element.

Each sub-Menu page must have a unique identifier (such as the id or data-id attribute).

The above is the detailed content of How to use two menu pages in layui. For more information, please follow other related articles on the PHP Chinese website!