Menu | Document | UNITS - Simple and beautiful CSS component set.

1. Menu bar

You can create a menu bar by specifying the _bar class.

<nav class="uc-menu _bar _black" id="menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
      <a href="#">Menu4</a>
      <a href="#">Menu5</a>
      <a href="#">Menu6</a>
    </div>
  </div>
</nav>

2. Color variations

Two kinds of color variations are available.

<!-- black -->
<nav class="uc-menu _bar _black" id="menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
      <a href="#">Menu4</a>
      <a href="#">Menu5</a>
      <a href="#">Menu6</a>
    </div>
  </div>
</nav>

<!-- dark -->
<nav class="uc-menu _bar _dark" id="menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
      <a href="#">Menu4</a>
      <a href="#">Menu5</a>
      <a href="#">Menu6</a>
    </div>
  </div>
</nav>

3. Slide menu

By specifying the _slide class, you can create slide-style menus.

<!-- A button for expanding the menu is necessary. -->
<div class="uc-menu-btn" data-open-target="#slide-menu">
  <button><i class="uc-menu-btn-icon"></i></button>
</div>

<!-- Slide menu body -->
<nav class="uc-menu _slide" id="slide-menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
    </div>
  </div>
</nav>

<!-- If you specify the `_left` class, you can also slide from the left side. -->
<nav class="uc-menu _slide _left" id="slide-menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
    </div>
  </div>
</nav>