ECSHOP仿趣玩导航分类效果实现

简单看了一下首页的加载文件，有点晕了。后来仔细一看，还好，这个不是用js实现的，也没有加载jquery.因为这方面相对较弱，所以心理有恐惧。

这个导航的具体实现过程还是纯DIV+CSS来实现的。

废话不多说，下面看完整实现过程。

首先，作为测试用，我们还是自己建一个php页面，和dwt页面。

首先建立一个test.php页面.

代码：

<?php

define('IN_ECS', true);

require(dirname(__FILE__) . '/includes/init.php');

if ((DEBUG_MODE & 2) != 2)
{
    $smarty->caching = true;
}
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);

$uachar = "/(nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|mobile)/i";

if(($ua == '' || preg_match($uachar, $ua))&& !strpos(strtolower($_SERVER['REQUEST_URI']),'wap'))
{
    $Loaction = 'mobile/';

    if (!empty($Loaction))
    {
        ecs_header("Location: $Loaction\n");

        exit;
    }

}
assign_template();
$smarty->display("test.dwt");
?>

标红的一行注意一定要加在里面，因为这里面有传递$nav.middle导航的数据。

下面建立test.dwt文件。

代码：

<!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-Type" content="text/html; charset=utf-8" />
<title>趣玩导航测试</title>
<link href="./themes/quwan/nav.css" rel="stylesheet" type="text/css" /><

</head>
<body>
<?php
    require_once("themes/quwan/util.php");
?>
<div id="mainNav" class="clearfix">
    <ul class="u1" onmouseover="this.className='u1" onmouseout="this.className='u1'"   {if $navigator_list.config.index eq 1} id="cur"                 {/if}  >
      <a  class="a1 home_a"  href="../index.php">{$lang.home} </a>
    </ul>
    <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
 
     <img style="float:left; padding:0 0px; "  src="../images/meun_line.gif">
     <ul class="u1" onmouseover="this.className='u1 u1_over'" onmouseout="this.className='u1'"  {if $nav.active eq 1} id="cur"   {/if} >
  
      <a class="a1" 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 "<table cellpadding='0' border='0' cellspacing='0px' class='sub_nav'    ><tr >";
                               
                                if($subcates)
                                {
                               
                               
                                foreach($subcates as $cate)
                               
                               
                                {
                                echo "<td valign='top'><div style=' width:125px; padding-left:1px;border-top:10px solid #fff'>";
                               
                                    echo "<a href='".$cate['url']."'  >".$cate['name']."</a>";
                                   
                                    if($cate['children'])
                                    {
                                    foreach($cate['children'] as $subcate)
                                    {
                                        echo "<a href='".$subcate['url']."' class='level_2'>".$subcate['name']."</a>";
                                    }
                                    }
                                   
                                 echo "</div></td>";   
                                }
                               
                               
                                }
                               
                                echo "</tr></table>";
                            }
                        }
                     ?>
 
 
  </ul>
 
 <!-- {/foreach} -->
</div>
</body>
</html>
代码我都尽量简化，方便大家看。当然，一个模板页头部不可能这么写的。

这个就是导航的div布局。标红的一行包含了一个php文件，里面写了几个函数，这个导航只调用了其中的一个函数，该函数的目的是调用分类下的子分类。为了代码少，所以此处只把这个函数的内容贴上来。你有趣玩的模板自己去看看。很简单。

获取子分类：

代码：

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 ORDER BY sort_order ASC, cat_id ASC";
        $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;
    }
}

好，做到这一步，我们的div页面写好，里面的ul也用foreach循环调用了子分类数据。唯一差的就是样式。因为我说了，这个是DIV+CSS布局的。

我们现在看一下做到这一步的效果。

那么，下面就差一件事情没做，就是把这些CSS找出来。对这个导航进行排版。

首先。我们修改一下CSS链接地址。

<link href="./themes/quwan/nav.css" rel="stylesheet" type="text/css" />

看到了，我上面在test.dwt里面已经重新定位了CSS页面。

我们在quwan目录下面新建一个nav.css文件，在里面写上所有的关于此导航的代码就OK。

nav.CSS代码：

body {background:#fff;font-size:12px;font-family:Arial;line-height:150%;color:#666;margin:0;padding:0;
background: url(images/index_bg.jpg) repeat-x;
background-image: url(images/index_bg.jpg);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
}


div {margin:0 auto;padding:0;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p {border:none;list-style-type:none;margin:0;padding:0;}
a{ color:#666; text-decoration:none}
a:hover{ color:#c00; text-decoration:underline}
.block {width:960px;height:auto ; overflow:hidden}

#mainNav_out {border-bottom:1px solid #cdcdcd;background:#c60c0d;width:100%;}
#mainNav {width:960px;height:36px;position:relative;z-index:999;margin:0 auto;  background:url(images/meun_bg.gif) repeat-x}
#mainNav .a1 {color:#fff;float:left;
width: 86px;
height: 36px;
line-height: 36px;
text-align: center;
font-family: "微软雅黑";
font-weight: 800;
font-size: 14px; }

#mainNav .ul_l{ display:none}
#mainNav .ul_r{ display:none}
#mainNav .u1_over .ul_l{ display:block; position:absolute; left:0; top:8px;}
#mainNav .u1_over .ul_r{ display:block; position:absolute; right:0; top:8px;}

.dot_l,.dot_r{ display:none}

#mainNav .u1_over .dot_l{ display:block; position:absolute; left:0; top:27px; border:1px solid #fff }
#mainNav .u1_over .dot_r{ display:block; position:absolute; right:0; top:27px; border:1px solid #fff }

#mainNav .u1_over .a1{ background:#880104; color:#ffffff; height:36px;}
#mainNav .u1_over .home_a{height:21px; background:#fff; overflow:hidden}
#mainNav .u1_over .home_a  .dot_l,#mainNav .u1_over .home_a  .dot_r{ display:none}

#mainNav #cur .a1{background:#880104; color:#ffffff;
width: 86px;
height: 36px;
display: block;
line-height: 36px;
text-align: center;
font-family: "微软雅黑";
font-weight: 800;
color: white;
font-size: 14px;}
#mainNav #cur .ul_l{ display:block; position:absolute; left:0; top:8px;}
#mainNav #cur .ul_r{ display:block; position:absolute; right:0; top:8px;}

#mainNav .meun_float {height:27px;line-height:27px; float:right; line-height:22px; padding-top:3px; }
#mainNav .meun_float *{ vertical-align:middle}
#mainNav .meun_float a{ color:#FFF; text-decoration:none;  height:27px;line-height:27px;}
#mainNav .meun_float b{ font-weight:bold; font-size:12px;line-height:27px;}

#mainNav .img2 {position:absolute;left:635px;top:2px; z-index:99999;}

#mainNav .u1 .sub_nav{ display:none;}
#mainNav .u1 {height:36px; width:86px;line-height:36px;float:left;position:relative;z-index:999; }

#mainNav .u1_over .sub_nav {position:absolute;top:36px; left:-2px;display:block; background:#FFF; border:2px solid #c90809; border-top:none; padding:0px 0}
#mainNav .u1_over .sub_nav td{ width:125px; background:url(images/td_bg.gif) no-repeat ; border-bottom:10px solid #fff;}

#mainNav  .sub_nav a {color:#c60c0d; font-weight:bold ; text-decoration:none; width:115px;display:block; padding-left:10px; height:32px; line-height:32px;}
#mainNav  .sub_nav a:hover{ text-decoration:underline}
#mainNav  .sub_nav .level_2{ font-weight:normal; color:#666}
#mainNav  .sub_nav .level_2:hover{ font-weight:normal; background:#fff5e9; color:#c90809}

 

好，到此，这个分类导航就全部完成。
看效果就是下面这样。

相对来说，趣玩的这套模板还是比较规范的，值得大家去研究一下。

之前说想要整理一篇趣玩首页轮播的实现效果：看了一下。

<script src="themes/<?php echo $GLOBALS['_CFG']['template']; ?>/js/jquery1.4.1.js"></script>
<script src="themes/<?php echo $GLOBALS['_CFG']['template']; ?>/js/hp1.js"></script>

它里面有加载jquery,和js.这个要实现效果同时还要实现后台管理控制。这样才算比较完善。所以这个推一段时间整理。

the end!