Amaze UI 2.4

Web Components

Menu


This wiget helps to create a menu.

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

  <nav data-am-widget="menu" class="am-menu  am-menu-default"  
    
    
    
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-3">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-dropdown1"  
     data-am-menu-collapse
    
    
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-list"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-1 am-collapse">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-dropdown1"  
     data-am-menu-collapse
    
    
    
    > 
    <a href="javascript: void(0)" class="am-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="am-menu-nav am-avg-sm-1 am-collapse">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-dropdown1"  
     data-am-menu-collapse
    
    
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
        <span class="am-menu-toggle-title">菜单</span>
          <i class="am-menu-toggle-icon am-icon-angle-right"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-1 am-collapse">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-dropdown2"  
    
     data-am-menu-collapse
    
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-4 am-collapse">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-slide1"  
    
    
     data-am-menu-collapse
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-4 am-collapse">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-offcanvas1"  
    
    
    
     data-am-menu-offcanvas
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>

    <div class="am-offcanvas" >
      <div class="am-offcanvas-bar">

      <ul class="am-menu-nav am-avg-sm-1">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-offcanvas1"  
    
    
    
     data-am-menu-offcanvas
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>

    <div class="am-offcanvas" >
      <div class="am-offcanvas-bar am-offcanvas-bar-flip">

      <ul class="am-menu-nav am-avg-sm-1">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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-am-widget="menu" class="am-menu  am-menu-offcanvas2"  
    
    
    
    
     data-am-menu-offcanvas> 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>

    <div class="am-offcanvas">
      <div class="am-offcanvas-bar am-offcanvas-bar-flip">

      <ul class="am-menu-nav am-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-am-widget="menu" class="am-menu  am-menu-stack"  
    
    
    
    
    > 
    <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-menu-toggle-icon am-icon-bars"></i>
    </a>


      <ul class="am-menu-nav am-avg-sm-1">
          <li class="am-parent">
            <a href="##" class="" >公司</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="##" class="" title="公司">进入栏目 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >人物</a>
              <ul class="am-menu-sub am-collapse  am-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="am-parent">
            <a href="#c3" class="" >趋势</a>
              <ul class="am-menu-sub am-collapse  am-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="am-menu-nav-channel"><a href="#c3" class="" title="趋势">泥煤 &raquo;</a></li>
              </ul>
          </li>
          <li class="am-parent">
            <a href="##" class="" >投融资</a>
              <ul class="am-menu-sub am-collapse  am-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>

Usage

Copy and Paste

  • Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
  • Replace the contents in examples with your own contents.

Using Handlebars

The Handlebars partial of this widget is menu. See Accordion for more details.

Allmobilize WebIDE

  • Drag the widget to the edit interface;
  • Click the Data binding button on the right panel, and bind data using following format.
var data = [
  {
    "title": "",            // Title of the top level menu.
    "link": "",             // Link of the top level menu.
    "className": "",
    "subMenu": [
      {                   // SubMenu
        "title": "",    // Title of this sumbmenu
        "link": "",     // Link of this sumbmenu
        "target": ""
      }
    ],
    "subCols": 3            // Number of columns in subMenu.
  }
];

return data;

Data binding

{
  "id": "",

  "className": "",

  "theme": "",

  "options": {
    "cols": 5, // Number of columns in top menu. [1-12]

    "offCanvasFlip": false, // Only avilable in offcanvas theme. The offCanvas will be on the left if this is set to false, and on the right if this is true.
  },

  // Data
  "content": [
    {
      "title": "", // Title of the top level menu.
      "link": "", // Link of the top level menu.
      "className": "", // The customized class of "li" in the menu
      "subCols": "", // Number of columns in subMenu.
      "channelLink": "Enter channel &raquo;", // Show text in submenu and link to this channel.
      "subMenu": [{
        "title": "", // Title of the submenu.
        "link": "", // Link of the submenu
        "className": "", // Class of the menu
      }]
    }
  ]
}
侧栏导航
Amaze UI 微信
在微信上关注我们