Web 组件

Menu 菜单

菜单组件。

目录

本组件针对移动端设计，由于视口宽度原因在本页显示有偏差，请点击演示右上角的 [ New Win] 在新窗口中查看。

<nav data-wd-widget="menu" class="wd-menu  wd-menu-default">
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-3">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-dropdown1" data-wd-menu-collapse>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-list"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-1 wd-collapse">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-dropdown1" data-wd-menu-collapse>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <img src="data:image/svg+xml;charset=utf-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 42 26&quot; fill=&quot;%23fff&quot;&gt;&lt;rect width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;1&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;rect y=&quot;11&quot; width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;12&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;rect y=&quot;22&quot; width=&quot;4&quot; height=&quot;4&quot;/&gt;&lt;rect x=&quot;8&quot; y=&quot;23&quot; width=&quot;34&quot; height=&quot;2&quot;/&gt;&lt;/svg&gt;"
    alt="Menu Toggle" />
  </a>
  <ul class="wd-menu-nav wd-avg-sm-1 wd-collapse">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-dropdown1" data-wd-menu-collapse>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <span class="wd-menu-toggle-title">菜单</span>
    <i class="wd-menu-toggle-icon wd-icon-angle-right"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-1 wd-collapse">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-dropdown2" data-wd-menu-collapse>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-4 wd-collapse">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-slide1" data-wd-menu-collapse>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-4 wd-collapse">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-offcanvas1" data-wd-menu-offcanvas>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <div class="wd-offcanvas">
    <div class="wd-offcanvas-bar">
      <ul class="wd-menu-nav wd-avg-sm-1">
        <li class="wd-parent">
          <a href="##" class="">公司</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
            <li class="wd-menu-nav-channel">
              <a href="##" class="" title="公司">进入栏目 &raquo;</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="##" class="">人物</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="#c3" class="">趋势</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
            <li class="wd-menu-nav-channel">
              <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="##" class="">投融资</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
          </ul>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-offcanvas1" data-wd-menu-offcanvas>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <div class="wd-offcanvas">
    <div class="wd-offcanvas-bar wd-offcanvas-bar-flip">
      <ul class="wd-menu-nav wd-avg-sm-1">
        <li class="wd-parent">
          <a href="##" class="">公司</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
            <li class="wd-menu-nav-channel">
              <a href="##" class="" title="公司">进入栏目 &raquo;</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="##" class="">人物</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="#c3" class="">趋势</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
            <li class="wd-menu-nav-channel">
              <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
            </li>
          </ul>
        </li>
        <li class="wd-parent">
          <a href="##" class="">投融资</a>
          <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
            <li class="">
              <a href="##" class="">公司</a>
            </li>
            <li class="">
              <a href="##" class="">人物</a>
            </li>
            <li class="">
              <a href="##" class="">趋势</a>
            </li>
            <li class="">
              <a href="##" class="">投融资</a>
            </li>
            <li class="">
              <a href="##" class="">创业公司</a>
            </li>
            <li class="">
              <a href="##" class="">创业人物</a>
            </li>
          </ul>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-offcanvas2" data-wd-menu-offcanvas>
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <div class="wd-offcanvas">
    <div class="wd-offcanvas-bar wd-offcanvas-bar-flip">
      <ul class="wd-menu-nav wd-avg-sm-3">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<nav data-wd-widget="menu" class="wd-menu  wd-menu-stack">
  <a href="javascript: void(0)" class="wd-menu-toggle">
    <i class="wd-menu-toggle-icon wd-icon-bars"></i>
  </a>
  <ul class="wd-menu-nav wd-avg-sm-1">
    <li class="wd-parent">
      <a href="##" class="">公司</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-2 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="##" class="" title="公司">进入栏目 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">人物</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="#c3" class="">趋势</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-4 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
        <li class="wd-menu-nav-channel">
          <a href="#c3" class="" title="趋势">泥煤 &raquo;</a>
        </li>
      </ul>
    </li>
    <li class="wd-parent">
      <a href="##" class="">投融资</a>
      <ul class="wd-menu-sub wd-collapse  wd-avg-sm-3 ">
        <li class="">
          <a href="##" class="">公司</a>
        </li>
        <li class="">
          <a href="##" class="">人物</a>
        </li>
        <li class="">
          <a href="##" class="">趋势</a>
        </li>
        <li class="">
          <a href="##" class="">投融资</a>
        </li>
        <li class="">
          <a href="##" class="">创业公司</a>
        </li>
        <li class="">
          <a href="##" class="">创业人物</a>
        </li>
      </ul>
    </li>
    <li class="">
      <a href="##" class="">创业公司</a>
    </li>
    <li class="">
      <a href="##" class="">创业人物</a>
    </li>
  </ul>
</nav>

使用方法

直接使用

  • 拷贝演示中的代码，粘贴到 旺道UI HTML 模板（点此下载） <body> 区域；
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 menu，使用细节参照折叠面板组件。

云适配 WebIDE

  • 将组件拖入编辑界面；
  • 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = [
  {
    "title": "",            // 一级菜单标题
    "link": "",             // 一级菜单链接
    "className": "",
    "subMenu": [
      {                   // 二级菜单
        "title": "",    // 二级菜单标题
        "link": "",     // 二级菜单链接
        "target": ""
      }
    ],
    "subCols": 3            // 设置二级菜单列数
  }
];

return data;

数据接口 

{
  "id": "",

  "className": "",

  "theme": "",

  "options": {
    "cols": 5, // 一级菜单列数 [1-12]

    "offCanvasFlip": false, // 仅在 offcanvas 主题下有效，侧滑菜单默认在左侧，如果要在右侧显示，请传递 true
  },

  // 菜单数据
  "content": [
    {
      "title": "", // 一级菜单标题
      "link": "", // 一级菜单链接
      "className": "", // 菜单 li 上的自定义 Class
      "subCols": "", // 子菜单(第二级)列数
      "channelLink": "进入栏目 &raquo;", // 如果设置了，二级菜单里将显示此文本并链接到该栏目
      "subMenu": [{
        "title": "", // 二级菜单标题
        "link": "", // 二级菜单链接
        "className": "", // 菜单上的 Class
      }]
    }
  ]
}