三级导航菜单系统实现

public/header.html

@@ -64,21 +64,59 @@
       {if isset($data.header_nav) && !empty($data.header_nav)}
       {foreach $data.header_nav as $k=>$item}
       {if isset($item.children) && !empty($item.children)}
-      <div class="nav-cont-menu animated slideInDown">
+      <div class="nav-cont-menu mega-menu animated">
         <div class="nav-content">
           {foreach $item.children as $child}
+          {* 判断是否有三级菜单 *}
+          {if isset($child.children) && !empty($child.children)}
+          {* 有三级菜单的二级分类 *}
+          <div class="nav-category">
+            <a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
+              class="nav-category-header" {if !empty($child.blank)}target="_blank" {/if}>
+              {if !empty($child.icon)}
+              <div class="nav-category-icon">
+                <img src="{$child.icon}" alt="{$child.name}">
+              </div>
+              {/if}
+              <div class="nav-category-info">
+                <div class="nav-category-title">{$child.name}</div>
+                {if !empty($child.description)}
+                <div class="nav-category-desc">{$child.description}</div>
+                {/if}
+              </div>
+            </a>
+            {* 三级菜单列表 *}
+            <div class="nav-third-level">
+              {foreach $child.children as $grandchild}
+              <div class="nav-third-item">
+                <a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
+                  class="nav-third-link" {if !empty($grandchild.blank)}target="_blank" {/if}>
+                  <span class="nav-third-name">{$grandchild.name}</span>
+                  {if !empty($grandchild.description)}
+                  <span class="nav-third-desc">{$grandchild.description}</span>
+                  {/if}
+                </a>
+              </div>
+              {/foreach}
+            </div>
+          </div>
+          {else /}
+          {* 没有三级菜单的二级项（旧版样式兼容） *}
           <a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}" {if
-            !empty($child.blank)}target="_blank" {/if}>
+            !empty($child.blank)}target="_blank" {/if} style="text-decoration: none;">
             <div class="nav-item-box">
               {if !empty($child.icon)}
-              <img src="{$child.icon}" alt="">
+              <img src="{$child.icon}" alt="{$child.name}">
               {/if}
               <div class="item-box-title">
                 <div class="title">{$child.name}</div>
+                {if !empty($child.description)}
                 <div class="desc">{$child.description}</div>
+                {/if}
               </div>
             </div>
           </a>
+          {/if}
           {/foreach}
         </div>
       </div>