用DIV+CSS来实现Ecshop导航分类效果

更新时间:2016-08-22 点击量:1943

ecshop用DIV+CSS来实现导航分类效果


优易软件为大家整理,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}

 
好,到此,这个分类导航就全部完成。
支付宝扫码打赏 微信打赏

如果文章对您有帮助,就打赏一个吧

在线客服

客户服务

热线电话:

0755-36656507 15889489919 服务时间:

周一到周六:9:00-18:00

在线QQ客服

在线微信客服

关于我们 常见问题

支付方式 加盟合作

提交需求
优惠红包 购物车0 反馈留言 返回顶部