導航 · WINUI開發文檔

#### 水平導航 ![](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> ```