alice-nav
v1.1.0
Published
导航样式
Downloads
14
Readme
Nav - 导航
主导航样式,支持两级菜单。
演示文档
默认用法
<div class="ui-nav">
<ul class="ui-nav-main">
<li class="ui-nav-item">
<a href="#">一级导航 1</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 1-1</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-3</a></li>
</ul>
</li>
<li class="ui-nav-item ui-nav-item-current">
<a href="#">一级导航 2</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem"><a href="#">二级导航 2-1</a></li>
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 2-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 2-3</a></li>
</ul>
</li>
<li class="ui-nav-item">
<a href="#">一级导航 3</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem"><a href="#">二级导航 3-1</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 3-2</a></li>
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 3-3</a></li>
</ul>
</li>
<li class="ui-nav-item"><a href="#">一级导航 4</a></li>
</ul>
<div class="ui-nav-subcontainer"></div>
</div>
不显示二级导航
<div class="ui-nav ui-nav-nosub">
<ul class="ui-nav-main">
<li class="ui-nav-item">
<a href="#">一级导航 1</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 1-1</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-3</a></li>
</ul>
</li>
<li class="ui-nav-item ui-nav-item-current">
<a href="#">一级导航 2</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem"><a href="#">二级导航 2-1</a></li>
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 2-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 2-3</a></li>
</ul>
</li>
</ul>
<div class="ui-nav-subcontainer"></div>
</div>