ecshop导航栏自动显示三级或多级子栏目,多级频道分类,并实现css高亮显示

àì夳堔傛蜴生んèń 2021-09-25 17:58 350阅读 0赞

效果图

![Center][]

ecshop导航要达到的目标:

一,比如上图,当我访问三级分类,**响应式布局,**这个栏目时,最顶级的元件这个分类,要高亮显示

二,如果导航上面有商品或文章频道, 并且他们有子栏目,则全自动显示所有的子栏目.

三,如果这个导航有子分类,则统一显示下拉三角标志.

代码如下

一,在includes/lib\_main.php 文件中,修改掉或另外重命名并重定义一个这个get\_navigator()函数,修改后的内容如下,另外get\_categories\_tree()这个函数为系统自带的在lib\_goods.php中

/**
     * 取得自定义导航栏列表
     * @param   string      $type    位置，如top、bottom、middle
     * @return  array         列表
     */
    function get_navigator($ctype = '', $catlist = array())
    {
        $sql = 'SELECT * FROM '. $GLOBALS['ecs']->table('nav') . '
                WHERE ifshow = \'1\' ORDER BY  vieworder';
        $res = $GLOBALS['db']->query($sql);
        $cur_url = substr(strrchr($_SERVER['REQUEST_URI'],'/'),1);
        if (intval($GLOBALS['_CFG']['rewrite']))
        {
            if(strpos($cur_url, '-'))
            {
                preg_match('/([a-z]*)-([0-9]*)/',$cur_url,$matches);
                $cur_url = $matches[1].'.php?id='.$matches[2];
            }
        }
        else
        {
            $cur_url = substr(strrchr($_SERVER['REQUEST_URI'],'/'),1);
        }
    
        $noindex = false;
        $active = 0;
    	$has_suv=0;
        $navlist = array(
            'top' => array(),
            'middle' => array(),
            'bottom' => array()
        );
        while ($row = $GLOBALS['db']->fetchRow($res)){
    		if($row['ctype']=='a'){//如果是文章类的栏目
    			$row3=get_article_tree_for_nav($row['cid']);//列出所有子文章分类
    		$navlist[$row['type']][] = array(
    			'name'      =>  $row['name'],
                'opennew'   =>  $row['opennew'],
                'url'       =>  $row['url'],
                'ctype'     =>  $row['ctype'],
                'cid'       =>  $row['cid'],
    			 'has_suv'       =>  1,//文章类用1
    			  'sub_nav'       =>  $row3,
    			);	   
    	}elseif($row['ctype']=='c'){//商品类的栏目
    			$row4=get_categories_tree($row['cid']);//使用系统默认的函数即可.商品子类
    		$navlist[$row['type']][] = array(
    			'name'      =>  $row['name'],
                'opennew'   =>  $row['opennew'],
                'url'       =>  $row['url'],
                'ctype'     =>  $row['ctype'],
                'cid'       =>  $row['cid'],
    			 'has_suv'       =>  2,//与文章的导航做区分
    			  'sub_nav'       =>  $row4,
    			);	   
    	}else{
    		$navlist[$row['type']][] = array(//单页面等栏目,比如about.php等
    			'name'      =>  $row['name'],
                'opennew'   =>  $row['opennew'],
                'url'       =>  $row['url'],
                'ctype'     =>  $row['ctype'],
                'cid'       =>  $row['cid']
    			);	
    	}	
        }
        /*遍历自定义是否存在currentPage*/
        foreach($navlist['middle'] as $k=>$v){
            $condition = empty($ctype) ? (strpos($cur_url, $v['url']) === 0) : (strpos($cur_url, $v['url']) === 0 && strlen($cur_url) == strlen($v['url']));//单页,如about.php等,$ctype的值没有被传入
    		//当前网址与数据库中循环出的网址相同
            if ($condition)//如果相同
            {
                $navlist['middle'][$k]['active'] = 1;//是否为当前页,追加到数组中
                $noindex = true;//非首页
            }
        }
        if(!empty($ctype))//文章或商品页面.在其控制器上传入了本栏目的类型,商品类,用c表示,或文章类,用a表示
        {
    		//print_r($catlist);exit;即当前访问分类id
            foreach($catlist as $key => $val){
    		$parent_arr=get_top_cat_id_arr($val,$ctype);//当前被访问的分类id的所有父栏目组成的数组
    		//print_r($parent_arr);exit;
                foreach($navlist['middle'] as $k=>$v)
                {
                    if(!empty($v['ctype']) && $v['ctype'] == $ctype && ($v['cid'] == $val ||in_array($v['cid'],$parent_arr)))
                    {//in_array($v['cid'],$parent_arr),这句表示,如果本导航条上显示的频道id,包含在了当前访问的栏目的所有父栏目id数组中,则本导航条可高亮显示
                        $navlist['middle'][$k]['active'] = 1;//高亮关键字
                        $noindex = true;   
                    }
                }
            }
        }
        if ($noindex == false) {
            $navlist['config']['index'] = 1;
        }
    //print_r($navlist);exit;
        return $navlist;
    }

二,同样在includes/lib\_main.php 文件中,增加以下函数

/**
     * 获得指定分类同级的所有分类以及该分类下的子分类
     *
     * @access  public
     * @param   integer     $cat_id     分类编号
     * @return  array
     */
    function get_article_tree($cat_id = 0){
        if ($cat_id > 0)//$cat_id当前分类
        {
    	   $parent_id=get_top_art_cat_id($cat_id);
        }
        else
        {
            $parent_id = 0;
        }
    
        /*
         判断当前分类中,是否是底级分类，
         如果是取出底级分类上级分类，
         如果不是取当前分类及其下的子分类v 
        */
        $sql = 'SELECT count(*) FROM ' . $GLOBALS['ecs']->table('article_cat') . " WHERE parent_id = '$parent_id'";//
        if ($GLOBALS['db']->getOne($sql)|| $parent_id == 0){
            /* 如果当前分类有子分类,获取当前分类及其子分类 */
            //$sql = 'SELECT cat_id, cat_name, sort_order FROM ' . $GLOBALS['ecs']->table('article_cat') ."WHERE cat_type=1 and cat_id = '$parent_id' ORDER BY sort_order ASC, cat_id ASC";//包含顶级本身,国内新闻
    		$sql = 'SELECT cat_id, cat_name, sort_order FROM ' . $GLOBALS['ecs']->table('article_cat') ."WHERE cat_type=1 and parent_id = '$parent_id' ORDER BY sort_order ASC, cat_id ASC";//除排顶级分类,只显示山东新闻,江苏新闻及子分类
    		//两种方式,这里得到的$row['cat_id']都是目标catid,即需要高亮显示的
     
        $res = $GLOBALS['db']->getAll($sql);
    
        $cat_arr = array();
    
        foreach ($res AS $row)
        {
    		
    		
            $cat_arr[$row['cat_id']]['id']   = $row['cat_id'];
            $cat_arr[$row['cat_id']]['name'] = $row['cat_name'];
            $cat_arr[$row['cat_id']]['url']  = build_uri('article_cat', array('acid' => $row['cat_id']), $row['cat_name']);
    		
    		$parent_id2=get_top_art_cat_id($row['cat_id']);//得到最顶级父栏目id
    
             if ($parent_id2>0)
            { 
    	$cat_arr[$row['cat_id']]['cat_id'] =get_article_tree_child($row['cat_id'],$cat_id);//第二个参数.传入浏览器的当前页面分类号
    	
    	
    		$cat_id2=get_one_child_cat($row['cat_id']);
    	$cat_arr[$row['cat_id']]['active']=$cat_arr[$row['cat_id']]['cat_id'][$cat_id2]['active'];//如果本栏目的其中任何一级子栏目是当前访问的栏目,则本栏目的所有父栏目 active=1,即可以高亮显示.
    	
            }
    		
        }
     }
     //print_r($cat_arr);exit;
        return $cat_arr;
    }
    function get_article_tree_child($tree_id = 0,$cat_id){
        $three_arr = array();
        $sql = 'SELECT count(*) FROM ' . $GLOBALS['ecs']->table('article_cat') . ' WHERE parent_id = '.$tree_id;
    
        if ($GLOBALS['db']->getOne($sql) || $tree_id == 0)
        {
            $child_sql = 'SELECT cat_id, cat_name, parent_id' .
                    ' FROM ' . $GLOBALS['ecs']->table('article_cat') .
                    "WHERE parent_id = '$tree_id'  ORDER BY sort_order ASC, cat_id ASC";
            $res = $GLOBALS['db']->getAll($child_sql);
    		
            foreach ($res AS $row)
            {
    		$cat_cur=$cat_loop=array();
    		$active=0;
    		$cat_cur=get_top_cat_id_arr($cat_id,'a');//当前访问的栏目的所有上级栏目id,所组成的数组
    		array_pop($cat_cur);//去除最顶级的栏目,防止干扰高亮
    		$cat_loop=get_top_cat_id_arr($row['cat_id'],'a');//循环时,本栏目的所有上级栏目id,所组成的数组
    		array_pop($cat_loop);//去除最顶级栏目id
    		if(count(array_intersect($cat_cur,$cat_loop))>0){
    			//如果当前访问的栏目的父栏目数组与循环栏目得到的父栏目数组,有交集,
    			//则访问的栏目与其所有父栏目都是$active=1;方便前台高亮
    			$active=1;		
    		}	   
    			   $three_arr[$row['cat_id']]['active']   = $active;
                   $three_arr[$row['cat_id']]['id']   = $row['cat_id'];
                   $three_arr[$row['cat_id']]['name'] = $row['cat_name'];
                   $three_arr[$row['cat_id']]['url']  = build_uri('article_cat', array('acid' => $row['cat_id']), $row['cat_name']);
    
                   if (isset($row['cat_id']) != NULL)
                       {
                           $three_arr[$row['cat_id']]['cat_id'] = get_article_tree_child($row['cat_id'],$cat_id);
    
                }
    			
            }
        }
        return $three_arr;
    }
    
    //得到其最上级分类的id
    function get_top_art_cat_id( $nid ){
    	$sql = "select parent_id from ".$GLOBALS['ecs']->table( "article_cat" )." where cat_id = ".$nid."";
    	$temp_id = 0;
    	$pid = $GLOBALS['db']->getOne( $sql );
    	if ( 0 < $pid )
    	{
    
    		$temp_id = get_top_art_cat_id( $pid );
    		return $temp_id;
    	}
    	$temp_id = $nid;
    	return $temp_id;
    }
    
    
    //本文章或商品--分类对应的所有上级分类的数组
    function get_top_cat_id_arr( $nid ,$ctype='c'){
    	if($ctype=='c'){$table=$GLOBALS['ecs']->table( "category" );}else{$table=$GLOBALS['ecs']->table( "article_cat" );}
    	$sql = "select parent_id from ".$table." where cat_id = ".$nid."";
    	$temp_id = 0;
    	$temp_arr=array();
    	$pid = $GLOBALS['db']->getOne( $sql );
    	if ( $pid==0 )
    	{
    		return $temp_arr;
    	}else{
    		$temp_arr[]=$pid ;
    		$sql2 = "select parent_id from ".$table." where cat_id = ".$pid."";
    	$pid2 = $GLOBALS['db']->getOne( $sql2 );
    		if($pid2==0){
    			return $temp_arr;
    		}else{
    			$temp_arr[]=$pid2 ;
    			$sql3 = "select parent_id from ".$table." where cat_id = ".$pid2."";
    	$pid3 = $GLOBALS['db']->getOne( $sql3 );
    	if($pid3==0){
    			return $temp_arr;
    		}else{
    			$temp_arr[]=$pid3 ;
    			$sql4 = "select parent_id from ".$table." where cat_id = ".$pid3."";
    	$pid4 = $GLOBALS['db']->getOne( $sql4 );
    	if($pid4==0){
    			return $temp_arr;
    		}else{
    			$temp_arr[]=$pid4;
    			$sql5 = "select parent_id from ".$table." where cat_id = ".$pid4."";
    	$pid5 = $GLOBALS['db']->getOne( $sql5 );
    	if($pid5==0){
    			return $temp_arr;
    		}else{
    			$temp_arr[]=$pid5;
    			$sql6 = "select parent_id from ".$table." where cat_id = ".$pid5."";
    	$pid6 = $GLOBALS['db']->getOne( $sql6 );
    			if($pid6==0){
    			return $temp_arr;
    		}else{
    			$temp_arr[]=$pid6;
    			return $temp_arr;
    		}}}}}}}

三,相应header模板中增加示例代码,具体可自己修改,如果要增加层级,在模板上继续嵌套即可.同时后面的这个函数也可以增加层级function get\_top\_cat\_id\_arr()

<ul id="nav2" class="nav2 clearfix">
    		<li class="nLi  {if $navigator_list.config.index eq 1}on{/if}"> <a  href="index.php"><span class="text">后易首页</span></a> </li>
    			    
            <li class="nLi  {if $nav.active eq 1}on{/if}"> <a  href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name} {if $nav.has_suv gt 0}<span class="arrow"></span>{/if}</a> 
    		{if $nav.has_suv eq 1}
    		<ul class="sub">
    		 
    		<li><a href="{$child.url}">{$child.name}</a>
    		
    		<ul class="sub">
    		
    		<li><a href="{$child1.url}">----{$child1.name}</a>
    		
    		<ul class="sub">
    		 
    		<li><a href="{$child2.url}">========{$child2.name}</a></li>
    		 
    		</ul>
    		</li>  
    		 
    		</ul>
    		</li>  
                     
    			   </ul>
    			   {/if}
     {if $nav.has_suv eq 2}
    		<ul class="sub">
    		 
    		<li><a href="{$child.url}">{$child.name}</a>
    		<ul class="sub">
    		
    		<li><a href="{$child1.url}">----{$child1.name}</a>
    		
    		<ul class="sub">
    		 
    		<li><a href="{$child2.url}">========{$child2.name}</a></li>
    		 
    		</ul>
    		</li>  
    		 
    		</ul>
    		</li>  
                     
    			   </ul>
    			   {/if}	   
    		</li>
    		</ul>

[Center]: /images/20210923/7cd14348452c4bf990540d54caff1dcb.png