メニュー
uc-menu
クラスを指定することで、メニューを作成することができます。
1. メニュー(バー型)
uc-menu._bar
クラスを指定することで、バー型のメニューを作成することができます。
<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. カラーバリエーション
2種類のカラーバリエーションが用意されています。
<!-- 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. メニュー(スライド型)
uc-menu._slide
クラスを指定することで、スライド型のメニューを作成することができます。
<!-- 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>