ecshop简单三部实现导航分类二级菜单

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}><a 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. <a 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 "<a 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. ?>
时间: 2024-10-10 22:46:44

ecshop简单三部实现导航分类二级菜单的相关文章

Bootstrap系列 -- 40. 导航条二级菜单

在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">导航条</a> </div> <ul class="nav navb

水平导航-js二级菜单方法一

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平导航-二级菜单</title> <style type="text/css"> *{ padding:0px; margin: 0px; } .navBar{ height: 30px; background-color:

dedecms织梦导航栏二级菜单的实现方法

dede导航下拉菜单,一级栏目增加二级下拉菜单 使用dedecms5.6——5.7 将这段代码贴到templets\default\head.htm文件里<!-- //二级子类下拉菜单,考虑SEO原因放置于底部  --><script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>{dede:channelartlist typeid='top'

简单仿京东导航下拉菜单 javascript

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script><script type=&quo

兼容ie7的导航下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

纯CSS实现二级导航下拉菜单--css的简单应用

思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级导航下拉菜单代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="text/html" http

Javascript实现简单的下拉二级菜单

在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

五中常用简洁后台导航菜单(一级导航,二级导航,手风琴式导航,左或右悬浮式导航,树状导航)

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

二级导航下拉菜单

纯css3二级导航下拉菜单,新增一些css3的特效,提供借鉴学习,如有雷同之处勿喷 <!DOCTYPE html><html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>二级下拉导航</title> <meta name=&