论zencart之第二连发:导航栏

Zen Cart 模板、教程、设计、使用交流
版面规则
严禁盗版、侵权的模板下载、讨论,违者封ID、IP。

zencart 发帖图标 论zencart之第二连发:导航栏

帖子happy_pai » 2014-04-05 12:15

zencart的导航栏都是通过ezpage控制,底部还好,头部我们常常需要目录做导航栏,但是zencart的categories tab又无法实现我们想要的功能,至少我们需要一个二级下拉导航吧。好在网上有很多的导航插件,个人比较推荐大家使用layout_css,他们都是使用categories_ul.php文件里面的类实现的,他的优点就是只读取了一次数据库,缺点是太多嵌套循环,灵活性不够。所以我还是比较喜欢多次访问数据库,拿实现二级下拉为例,第一次获取一级目录,第二次根据子目录的parent_id获取子目录。
这边使用懒人图库的导航js为例实现的二级下拉代码如下:
代码: 全选
<nav class="navbar">
<?php
if (CATEGORIES_TABS_STATUS == '1')
{
   echo '<ul class="menu">';
   $categories_tab_query = "SELECT c.categories_id, cd.categories_name FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '0' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name;";//LIMIT 6;
   $categories_tab = $db->Execute($categories_tab_query);

   while (!$categories_tab->EOF)
   {
   // currently selected category
      echo '<li class="top'.$categories_tab->fields['categories_id'].'"><a href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'">';
      if((int)$cPath == $categories_tab->fields['categories_id'])
       echo '<span class="category-subs-selected">'.$categories_tab->fields['categories_name'].'</span></a>';
      else {
       echo $categories_tab->fields['categories_name'].'</a>';
      }
      $subcategories_tab_query="SELECT c.categories_id, cd.categories_name FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '".(int)$categories_tab->fields['categories_id']."' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name;";
      $subcategories_tab=$db->Execute($subcategories_tab_query);
      if($subcategories_tab->RecordCount()>0)
      {
         echo '<ul>';
         while (!$subcategories_tab->EOF)
         {
            $cPath_new = "cPath=".zen_get_generated_category_path_rev($subcategories_tab->fields['categories_id']);
            echo '<li>'.'<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">'.$subcategories_tab->fields['categories_name'].'</a></li>';
            $subcategories_tab->MoveNext();
         }
         echo '</ul>';
      }
      echo '</li>';
      $categories_tab->MoveNext();
   }
   echo '</ul>';
}
?>
</nav>


我之所以喜欢这么做,请看代码里面的有个注释"//LIMIT 6;",通过sql语句的limit,我们可以随意控制在头部显示一级目录的个数,显示6个就是LIMIT 6,7个就是LIMIT 7,加在查询语句最后面。是不是很方便。
附上css和js
css
代码: 全选
nav{background:#000;display:block;clear:both;}
.menu{height:32px;padding-left:5px;_overflow:hidden}
.menu a{color:#fff;height:16px;line-height:16px;float:left;position:relative}
.top{background:#333;position:relative;z-index:2}
.menu li{font-size:12px;float:left;position:relative;padding:8px 5px;}
.menu li:hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 4px;}
.menu li:hover a{color:#357d13}
.menu li.no_sub:hover{border:1px solid #629d2a;padding:7px 11px}
.menu ul{width:158px;background-color:#fff;border:1px solid #629d2a;border-top:none;position:absolute;left:-1px;top:-999em;z-index:99999;padding:8px;display:none}
.menu .top9 ul,.menu .top36 ul,.menu .top109 ul,.menu .top114 ul{width:640px;}
.menu .top176 ul{left:-103px;}
.menu li:hover ul{top:31px;display:block}
.menu li:hover ul li{font-size:11px;border:none;width:150px;float:left;padding:4px 0 4px 10px}
.menu li:hover ul li a{color:#333;text-decoration:none;padding:0}
.menu li:hover ul li a:hover{text-decoration:underline}
/*IE6*/
.menu li.hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}
.menu li.hover a{color:#357d13}
.menu li.hover ul{top:31px;display:block}
.menu li.hover ul li{border:none;width:150px;float:left;padding:4px 0 4px 10px}
.menu li.hover ul li a{height:16px;line-height:16px;font-size:11px;color:#333;text-decoration:none;padding:0}
.menu li.hover ul li a:hover{text-decoration:underline}
.menu li.no_sub.hover1{border:1px solid #629d2a;padding:7px 11px}

js:
jscript.zip
(32.72 KiB) 被下载 123 次
happy_pai
普通会员
普通会员
 
帖子: 35
注册: 2011-04-19 15:12
QQ 帐号: 530176577

  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 模板美工



在线用户

正在浏览此版面的用户:没有注册用户 和 9 位游客