1.在page_header.lbi对应的位置(你想显示导航的位置)插入

(注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)

  1. <?php
  2. require_once("themes/模板名称/util.php");
  3. ?>
  4. <div class="header-menu">
  5. <p {if $navigator_list.config.index eq 1} class="cur" {/if}><href="../index.php">{$lang.home}</a></p>
  6. <ul>
  7. <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
  8. <li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}>
  9. <href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}</a>
  10. <?php
  11. $subcates = get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);
  12. if($subcates!=false)
  13. {
  14. if(count($subcates)>0)
  15. {
  16. echo "<div class='sub_nav'>";
  17. if($subcates)
  18. {
  19. foreach($subcates as $cate)
  20. {
  21. echo "<href='".$cate['url']."' class='level_1'>".$cate['name']."</a>";
  22. }
  23. }
  24. echo "</div><iframe frameborder='0' scrolling='no' class='nomask'></iframe>";
  25. }
  26. }
  27. ?>
  28. </li>
  29. <!-- {/foreach} -->
  30. </ul>
  31. <script type="text/javascript">
  32. //初始化主菜单
  33. function sw_nav(obj,tag)
  34. {
  35. var subdivs = obj.getElementsByTagName("DIV");
  36. var ifs = obj.getElementsByTagName("IFRAME");
  37. if(subdivs.length>0)
  38. {
  39. if(tag==1)
  40. {
  41. subdivs[0].style.display = "block";
  42. ifs[0].style.display = "block";
  43. }
  44. else
  45. {
  46. subdivs[0].style.display = "none";
  47. ifs[0].style.display = "none";
  48. }
  49. }
  50. }
  51. </script>
  52. </div>

2.在CSS文件中插入

  1. .header-menu p{ float:left;padding:1px 12px 1px 0;margin-top:-2px;}
  2. .header-menu  ul li{float:left;padding:1px 12px 1px 12px;margin-top:-2px;}
  3. .header-menu ul li a,.header-menu p a{color: #333;display:block;}
  4. .header-menu ul li a:hover,.header-menu p a:hover{color:#888;}
  5. .header-menu ul li.curs{background:#999;}
  6. .header-menu ul li.curs a{color:#fff;}
  7. .sub_nav{ background:#999;width:110px; position:absolute; z-index:5003; display:none;margin-left:-12px;}
  8. .nomask{ background:#fff; width:110px; height:50px; position:absolute; z-index:5002;display:none;margin-left:-12px;}
  9. .sub_nav a.level_1{ display:block;color:#fff;padding:6px 6px 6px 13px;font:11px Tahoma,Verdana,PMingLiU,Arial;border-bottom:1px dotted #D1D1D1;*border-bottom:1px dotted #D1D1D1 !important;*border-bottom:1px solid #A8A8A8;}
  10. .sub_nav a.level_1:hover{color:#fff;background:#55B46C;text-decoration:none;}

3.把以下代码编辑成(util.php)解压出来拷贝到模板目录下

  1. <?php
  2. /**
  3. * 通过传入参数的url判断是否为目录分类,从而获取子菜单
  4. *
  5. * @param string $url
  6. */
  7. function get_subcate_byurl($url)
  8. {
  9. $rs = strpos($url,"category");
  10. if($rs!==false)
  11. {
  12. preg_match("/\d+/i",$url,$matches);
  13. $cid = $matches[0];
  14. $cat_arr = array();
  15. $sql = "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$cid." and is_show=1";
  16. $res = $GLOBALS['db']->getAll($sql);
  17. foreach($res as $idx => $row)
  18. {
  19. $cat_arr[$idx]['id']   = $row['cat_id'];
  20. $cat_arr[$idx]['name'] = $row['cat_name'];
  21. $cat_arr[$idx]['url']  = build_uri('category', array('cid' => $row['cat_id']), $row['cat_name']);
  22. $cat_arr[$idx]['children'] = get_clild_list($row['cat_id']);
  23. }
  24. return $cat_arr;
  25. }
  26. else
  27. {
  28. return false;
  29. }
  30. }
  31. function get_clild_list($pid)
  32. {
  33. //开始获取子分类
  34. $sql_sub = "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$pid." and is_show=1";
  35. $subres = $GLOBALS['db']->getAll($sql_sub);
  36. if($subres)
  37. {
  38. foreach ($subres as $sidx => $subrow)
  39. {
  40. $children[$sidx]['id']=$subrow['cat_id'];
  41. $children[$sidx]['name']=$subrow['cat_name'];
  42. $children[$sidx]['url']=build_uri('category', array('cid' => $subrow['cat_id']), $subrow['cat_name']);
  43. }
  44. }
  45. else
  46. {
  47. $children = null;
  48. }
  49. return $children;
  50. }
  51. ?>

ecshop简单三部实现导航分类二级菜单相关推荐

  1. 简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果

    页面样式如下: html: <li><div class="nav-tab">技术分析</div><ul class="nav- ...

  2. Axure RP9——【导航栏二级菜单的展开效果】

    导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录 导航栏二级菜单的展开效果 Nav ...

  3. html 中怎么写二级导航,html二级菜单导航栏成品

    html 高级二级导航菜单 代码如下: #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: ...

  4. html+css 实现导航栏二级菜单——气泡框

    页面效果展示: 代码实现: HTML部分 <!DOCTYPE html> <html lang="en"><head><meta char ...

  5. 第四篇 bonus:js代码实现网页导航二级菜单

    第四篇 bonus:js代码实现网页导航二级菜单 由于小猪蹄子说想学习一些和爬虫相关的东西,所以我让她去看看requests这个库,非常的人性化,可以非常方便的实现常用的爬虫功能.但是小猪蹄子看了以后 ...

  6. 前端入门css学习笔记(十七)-----二级菜单

    二级菜单的方法就是在一个<ul><li>中再嵌套一个<ul><li> 如下: <ul class="box"><l ...

  7. css导航栏(二级菜单)

    效果: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...

  8. html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度?_html/css_WEB-ITnose

    New Document 首页 新闻国际新闻 国内新闻 体育新闻 财经股票市场 证券行情 基金保险 联系我们 回复讨论(解决方案) .menu li ul a{ display:block; font ...

  9. css二级菜单的隐藏与显示_具有二级菜单的导航案例

    下图为具有二级菜单的导航效果,鼠标悬浮在"服装"菜单时出现如图所示的二级菜单效果. 鼠标悬浮于二级菜单效果如下图所示: 注:鼠标悬浮于菜单时,二级菜单背景颜色为渐变,渐变颜色值为# ...

最新文章

  1. ICRA 2022 | CaTGrasp: 从模拟器中学习类别级的任务相关的抓取姿态
  2. pytorch 打印模型参数
  3. prometheus+grafana+pushgateway+node-exporter+consul搭建监控系统
  4. java asm 中文文档_Java ASM3学习(3)
  5. bash的一些小技巧
  6. 一文玩转 EhCache 缓存框架!
  7. C Runtime Library来历, API, MFC, ATL关系
  8. 关键字nullable,nonnull,null_resettable,_Null_unspecified详解
  9. 【BZOJ-1097】旅游景点atr SPFA + 状压DP
  10. 鸿蒙系统微信红包,鸿蒙道红包版
  11. Scarlett~スカーレット 有感,新的价值观
  12. 微信提示在客户端提交验证_微信中怎么查看我发送的好友验证请求?
  13. 马科维茨投资组合理论(均方模型)学习笔记——基于Matlab(一)
  14. SysML实践指南第二版(中文翻译:刘亚龙)第三章 SysML介绍
  15. 恢复rm -rf 的数据
  16. 配置H3C设备无线AP多vlan步骤
  17. WinUSB安装以及与Linux通讯
  18. Android 通过 WebView 请求下载 APK
  19. nokogiri 足球比赛数据
  20. slice 和 splice的区别是什么?

热门文章

  1. java 无向图子图_无向图的连通子图
  2. 批处理bat中的脚本
  3. 设计模式之AbstractFactory
  4. 题目1090:路径打印
  5. setDAta 字符串拼接
  6. Linux配置免密登录
  7. Visual studio 利用Nuget 控制台安装已经下载好的插件
  8. shell脚本编程-结构化命令2-for命令
  9. web touch 事件
  10. Oracle 唯一 索引 约束 创建 删除