#### 水平导航 ![](https://box.kancloud.cn/79f09e183b6bded0c01aebb62874045b_867x96.png) 代码示例: ``` <div class="win-nav win-clearfix"> <ul class="win-left"> <li class="win-nav-item win-this"> <a href="javascript:void(0);">形式</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">导航</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">纽扣</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">内容</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">移动</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">线框</a> </li> </ul> <div class="win-right win-nav-right"> <a class="win-nav-search" href="javascript:;"> <i class="win-icon win-icon-search"></i> <input type="search" class="win-hide" /> </a> </div> </div> ``` ***** #### 水平导航带登录 ![](https://box.kancloud.cn/03fd98bed4a2d6c827cd4e99fa00d549_867x92.png) 代码示例: ``` <div class="win-nav win-clearfix"> <ul class="win-left"> <li class="win-nav-item win-this"> <a href="javascript:void(0);">形式</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">导航</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">纽扣</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">内容</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">移动</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">线框</a> </li> </ul> <div class="win-right win-nav-right win-nav-login"> <a class="win-nav-search" href="javascript:;"> <i class="win-icon win-icon-search"></i> <input type="search" class="win-hide" /> </a> <a href="javascript:;">登录</a> <span>|</span> <a href="javascript:;">注册</a> </div> </div> ``` ***** #### 水平导航已登录状态 ![](https://box.kancloud.cn/c285c6db90bc888e9218defbb4d91823_859x95.png) 代码示例: ``` <div class="win-nav win-clearfix"> <ul class="win-left"> <li class="win-nav-item win-this"> <a href="javascript:void(0);">形式</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">导航</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">纽扣</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">内容</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">移动</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">线框</a> </li> </ul> <div class="win-right win-nav-right"> <a class="win-nav-logined win-relative" href="javascript:;"> <input type="search" placeholder="请输入" /> <i class="win-icon win-icon-search"></i> </a> <a href="javascript:;" style="padding: 0 8px;"> <img src="../img/avatar.png" /> </a> </div> </div> ``` ***** #### 侧栏 ![](https://box.kancloud.cn/120133e02ce9b766a8b6c4523f71bb67_563x250.png) 代码示例: ``` <ul class="win-nav win-nav-tree win-left" style="margin-right: 10px;"> <li class="win-nav-item win-this"> <a href="javascript:void(0);">一级栏目</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">解决方案</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">选中栏目</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">鼠标经过效果</a> </li> <li class="win-nav-item"> <a href="javascript:void(0);">播放效果</a> </li> </ul> <ul class="win-nav win-nav-tree win-left"> <li class="win-nav-item win-nav-first win-nav-itemed"> <a href="javascript:void(0);">默认展开 <span class="win-icon win-icon-down win-nav-more"></span> </a> <dl class="win-nav-child"> <dd> <a href="javascript:void(0);">解决方案</a> </dd> <dd> <a href="javascript:void(0);">选中栏目</a> </dd> <dd> <a href="javascript:void(0);">鼠标经过效果</a> </dd> </dl> </li> <li class="win-nav-item win-nav-first win-nav-itemed"> <a href="javascript:void(0);">播放历史</a> </li> </ul> ```