新增导航组件

demo/nav.html

@@ -1,5 +1,5 @@
 <fieldset class="layui-elem-field layui-field-title">
-  <legend>一般垂直导航</legend>
+  <legend>银色垂直导航</legend>
   <div class="layui-field-box">
     <ul class="layui-nav layui-nav-tree ul-nav-white">
       <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
@@ -23,4 +23,50 @@
       <li class="layui-nav-item"><a href="">大数据</a></li>
     </ul>
   </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>附带说明垂直导航</legend>
+  <div class="layui-field-box">
+    <div class="ul-section">
+      <div class="ul-nav-tree ul-padding-md">
+
+        <div class="ul-nav-tree-group">
+          <div class="ul-nav-tree-group-title">起步</div>
+          <div class="ul-nav-tree-group-main">
+            <a href="" class="ul-nav-tree-item current">
+              <div class="ul-nav-tree-item-title">欢迎</div>
+              <div class="ul-nav-tree-item-desc">项目介绍/使用说明</div>
+            </a>
+            <a href="" class="ul-nav-tree-item">
+              <div class="ul-nav-tree-item-title">开始使用</div>
+              <div class="ul-nav-tree-item-desc">安装方式,注意事项</div>
+            </a>
+            <a href="" class="ul-nav-tree-item">
+              <div class="ul-nav-tree-item-title">如何使用</div>
+              <div class="ul-nav-tree-item-desc">复制组件</div>
+            </a>
+          </div>
+        </div>
+        <div class="ul-nav-tree-group">
+          <div class="ul-nav-tree-group-title">
+            组件 </div>
+          <div class="ul-nav-tree-group-main">
+            <a href="" class="ul-nav-tree-item">
+              <div class="ul-nav-tree-item-title">列表</div>
+              <div class="ul-nav-tree-item-desc">用户列表/文章列表...</div>
+            </a>
+            <a href="" class="ul-nav-tree-item">
+              <div class="ul-nav-tree-item-title">头部</div>
+              <div class="ul-nav-tree-item-desc">页面头</div>
+            </a>
+            <a href="" class="ul-nav-tree-item">
+              <div class="ul-nav-tree-item-title">导航</div>
+              <div class="ul-nav-tree-item-desc">横竖导航/多级导航</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </fieldset>

public/cdn/layui-ul.css

@@ -1,6 +1,6 @@
 /* 列表开始 */
 .ul-nav-tree {
-  border-right: 1px solid #bbb;
+ 
 }
 
 .ul-nav-tree-group-title{
@@ -17,6 +17,10 @@
   white-space: nowrap;
 }
 
+.ul-nav-tree-item.current .ul-nav-tree-item-title{
+  color: #6cf;
+}
+
 .ul-nav-tree-item-title {
   font-size: 15px;
 
@@ -48,6 +52,10 @@
   background-position: center;
 }
 
+.ul-border-right{
+  border-right: 1px solid #bbb;
+}
+
 /* 通用类结束 */
 
 /* 用户头像开始 */

view/index/index/index.html

@@ -28,8 +28,8 @@
       </div>
     </div>
     <div class="layui-row layui-col-space6 " style="margin-top: 15px;">
-      <div class="layui-col-md3">
+      <div class="layui-col-md3 ul-border-right">
-        <div class="ul-nav-tree ul-padding-md">
+        <div class="ul-nav-tree ul-padding-md ">
 
           {volist name='list_post' id='category'}
           <div class="ul-nav-tree-group">
@@ -38,7 +38,7 @@
             </div>
             <div class="ul-nav-tree-group-main">
               {volist name='category.post' id='post'}
-              <a href="{:url('Index/index',['post_id'=>$post.id])}" class="ul-nav-tree-item">
+              <a href="{:url('Index/index',['post_id'=>$post.id])}" class="ul-nav-tree-item {eq name='post.id' value='$Request.param.post_id'}current{/eq}">
                 <div class="ul-nav-tree-item-title">
                   {$post.title}
                 </div>