ecshop简单三部实现导航分类二级菜单
2014-02-10 23:09
706 查看
1.在page_header.lbi对应的位置(你想显示导航的位置)插入
(注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)
2.在CSS文件中插入
(注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)
<?php require_once("themes/模板名称/util.php"); ?> <div class="header-menu"> <p {if $navigator_list.config.index eq 1} class="cur" {/if}><a href="../index.php">{$lang.home}</a></p> <ul> <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} --> <li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}> <a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}</a> <?php $subcates = get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']); if($subcates!=false) { if(count($subcates)>0) { echo "<div class='sub_nav'>"; if($subcates) { foreach($subcates as $cate) { echo "<a href='".$cate['url']."' class='level_1'>".$cate['name']."</a>"; } } echo "</div><iframe frameborder='0' scrolling='no' class='nomask'></iframe>"; } } ?> </li> <!-- {/foreach} --> </ul> <script type="text/javascript"> //初始化主菜单 function sw_nav(obj,tag) { var subdivs = obj.getElementsByTagName("DIV"); var ifs = obj.getElementsByTagName("IFRAME"); if(subdivs.length>0) { if(tag==1) { subdivs[0].style.display = "block"; ifs[0].style.display = "block"; } else { subdivs[0].style.display = "none"; ifs[0].style.display = "none"; } } } </script> </div>
2.在CSS文件中插入
.header-menu p{ float:left;padding:1px 12px 1px 0;margin-top:-2px;} .header-menu ul li{float:left;padding:1px 12px 1px 12px;margin-top:-2px;} .header-menu ul li a,.header-menu p a{color: #333;display:block;} .header-menu ul li a:hover,.header-menu p a:hover{color:#888;} .header-menu ul li.curs{background:#999;} .header-menu ul li.curs a{color:#fff;} .sub_nav{ background:#999;width:110px; position:absolute; z-index:5003; display:none;margin-left:-12px;} .nomask{ background:#fff; width:110px; height:50px; position:absolute; z-index:5002;display:none;margin-left:-12px;} .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;} .sub_nav a.level_1:hover{color:#fff;background:#55B46C;text-decoration:none;} 3.把以下代码编辑成(util.php)解压出来拷贝到模板目录下 [code] <?php /** * 通过传入参数的url判断是否为目录分类,从而获取子菜单 * * @param string $url */ function get_subcate_byurl($url) { $rs = strpos($url,"category"); if($rs!==false) { preg_match("/\d+/i",$url,$matches); $cid = $matches[0]; $cat_arr = array(); $sql = "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$cid." and is_show=1"; $res = $GLOBALS['db']->getAll($sql); foreach($res as $idx => $row) { $cat_arr[$idx]['id'] = $row['cat_id']; $cat_arr[$idx]['name'] = $row['cat_name']; $cat_arr[$idx]['url'] = build_uri('category', array('cid' => $row['cat_id']), $row['cat_name']); $cat_arr[$idx]['children'] = get_clild_list($row['cat_id']); } return $cat_arr; } else { return false; } } function get_clild_list($pid) { //开始获取子分类 $sql_sub = "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$pid." and is_show=1"; $subres = $GLOBALS['db']->getAll($sql_sub); if($subres) { foreach ($subres as $sidx => $subrow) { $children[$sidx]['id']=$subrow['cat_id']; $children[$sidx]['name']=$subrow['cat_name']; $children[$sidx]['url']=build_uri('category', array('cid' => $subrow['cat_id']), $subrow['cat_name']); } } else { $children = null; } return $children; } ?>
相关文章推荐
- ecshop简单三部实现导航分类二级菜单
- ecshop简单三部实现导航分类二级菜单
- ecshop简单三部实现导航分类二级菜单
- 简单三部实现导航分类二级菜单
- 简单三步实现导航分类二级菜单
- Asp.net 用datalist嵌套的方法实现二级菜单的分类导航
- 纯CSS实现超简单的二级下拉导航菜单代码
- 电商网站分类导航效果--CSS实现(二) 二级菜单
- 简单的二级菜单导航实现css代码
- JavaScript实现简单的二级导航菜单实例
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
- JS+CSS实现简单的二级下拉导航菜单效果
- JS+CSS实现简单的二级下拉导航菜单效果
- jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
- DedeCMS二级导航菜单的实现
- jquery实现的简单二级菜单效果代码
- javascript实现二级级联菜单的简单制作
- 小菜学习日记—html实现简单下拉二级菜单
- JS实现黑色大气的二级导航菜单效果
- JavaScript实际应用:简单二级联动菜单实现