kiddieshop:
use following css
/******************************* menu structure *******************************/
.zcwd_menu a, .zcwd_menu a:link, .zcwd_menu a:visited, .zcwd_menu a:hover {
text-align: left;
text-decoration: none;
outline: none;
letter-spacing: normal;
word-spacing: normal;
float:left;
}
.zcwd_menu, .zcwd_menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
background-image: url('../images/nav_bg.png');
}
.zcwd_menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
.zcwd_menu li:hover {
z-index: 10000;
white-space: normal;
}
.zcwd_menu li li {
float: none;
}
.zcwd_menu ul {
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
}
.zcwd_menu li:hover>ul {
visibility: visible;
top: 100%;
}
.zcwd_menu li li:hover>ul {
top: 0;
left: 100%;
}
.zcwd_menu:after, .zcwd_menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.zcwd_menu, .zcwd_menu ul {
min-height: 0;
}
.zcwd_menu ul {
background-image: url(../images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.zcwd_menu ul ul {
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/******************************* menu structure *******************************/
.zcwd_menu {
padding: 0 0 0 0;
}
.zcwd_nav {
position: relative;
height: 29px;
z-index: 100000;
}
.zcwd_nav .l, .zcwd_nav .r {
position: absolute;
z-index: -1;
top: 0;
height: 33px;
}
.zcwd_nav .l {
left: 0;
right: 0;
}
.zcwd_nav .r {
right: 0;
width: 1000px;
clip: rect(auto, auto, auto, 1000px);
}
/******************************* end Menu *******************************/
/******************************* begin MenuItem /
.zcwd_menu a {
position: relative;
display: block;
overflow: hidden;
height: 29px;
margin-top:2px;
cursor: pointer;
text-decoration: none;
}
.zcwd_menu ul li {
margin:0;
clear: both;
}
.zcwd_menu a .r, .zcwd_menu a .l {
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 87px;
background-image: url('../images/menuitem.png');
}
.zcwd_menu a .l {
left: 0;
right: 0;
}
.zcwd_menu a .r {
width: 400px;
right: 0;
clip: rect(auto, auto, auto, 400px);
}
.zcwd_menu a .t {
margin-right: 10px;
margin-left: 10px;
color: #FFFFFF;
padding: 0 22px;
margin: 0 0;
line-height: 29px;
text-align: center;
}
.zcwd_menu a:hover .l, .zcwd_menu a:hover .r {
top: -29px;
}
.zcwd_menu li:hover>a .l, .zcwd_menu li:hover>a .r {
top: -29px;
}
.zcwd_menu li:hover a .l, .zcwd_menu li:hover a .r {
top: -29px;
}
.zcwd_menu a:hover .t {
color: #E7E9E7;
}
.zcwd_menu li:hover a .t {
color: #E7E9E7;
}
.zcwd_menu li:hover>a .t {
color: #E7E9E7;
}
.zcwd_menu a.active .l, .zcwd_menu a.active .r {
top: -58px;
}
.zcwd_menu a.active .t {
color: #FFFFFF;
padding: 0 22px;
}
.zcwd_menu a.active .l, .zcwd_menu a.active .r {
top: -87px;
}
.zcwd_menu a.active .t {
color: #FFFFFF;
}
/ end MenuItem *******************************/
/******************************* begin MenuSeparator *******************************/
.zcwd_menu .zcwd_menu-li-separator {
display: block;
width: 1px;
height: 29px;
}
.zcwd_nav .zcwd_menu-separator {
display: block;
margin:0 auto;
width: 1px;
height: 29px;
/* background-image: url('../images/menuseparator.png'); /
}
/****************************** end MenuSeparator *******************************/
/******************************* begin MenuSubItem /
.zcwd_menu ul a {
display: block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 260px;
overflow: hidden;
line-height: 20px;
background-image: url('../images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
}
.zcwd_menu li ul {
border-width: 1px;
border-style: solid;
border-color: #000;
margin:0;
padding:0;
}
.zcwd_nav ul.zcwd_menu ul span, .zcwd_nav ul.zcwd_menu ul span span {
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.zcwd_menu ul a, .zcwd_menu ul a:link, .zcwd_menu ul a:visited, .zcwd_menu ul a:hover, .zcwd_menu ul a:active, .zcwd_nav ul.zcwd_menu ul span, .zcwd_nav ul.zcwd_menu ul span span {
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #000000;
margin-right: 10px;
margin-left: 10px;
margin:0;
padding:0;
}
.zcwd_menu ul li a:hover {
color: #F8F7F1;
border-color: #8E988B;
background-position: 0 -20px;
}
.zcwd_menu ul li:hover>a {
color: #F8F7F1;
border-color: #8E988B;
background-position: 0 -20px;
}
.zcwd_nav .zcwd_menu ul li a:hover span, .zcwd_nav .zcwd_menu ul li a:hover span span {
color: #000000;
}
.zcwd_nav .zcwd_menu ul li:hover>a span, .zcwd_nav .zcwd_menu ul li:hover>a span span {
color: #000000;
}
/ end MenuSubItem *******************************/
>
> Then edit tpl_modules_categories_tabs.php and save it to your overide template folder i.e. includes/templates/TEMPLATENAME/template
>
> ```
<?php
/**
* Module Template - categories_tabs with dropdown product menus
*
* Template stub used to display categories-tabs output
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_modules_categories_tabs.php 3395 2006-04-08 21:13:00Z ajeh $
*/
?>
<?php
if (CATEGORIES_TABS_STATUS == '1')
{
echo '<ul class="zcwd_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;";
$categories_tab = $db->Execute($categories_tab_query);
while (!$categories_tab->EOF)
{
// currently selected category
echo '<li>';
echo '<a href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'"><span class="l"></span><span class="r"></span><span class="t">' . "\n";
if((int)$cPath == $categories_tab->fields['categories_id'])
echo ''.$categories_tab->fields['categories_name'].'</span>' . "\n";
else
echo $categories_tab->fields['categories_name'];
echo '</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=zen_get_path($subcategories_tab->fields['categories_id']);
$cPath_new=str_replace('=0_', '=', $cPath_new);
$cPath_new="cPath=".$subcategories_tab->fields['categories_id'];
echo '<li>'.'<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">'.$subcategories_tab->fields['categories_name'].' -></a></li>' . "\n";
$subcategories_tab->MoveNext();
}
echo '</ul>' . "\n";
}
$products_tab_query="SELECT p.`products_id`, pd.`products_name`, pd.`language_id` FROM ".TABLE_PRODUCTS." p, ".TABLE_PRODUCTS_DESCRIPTION." pd WHERE p.`master_categories_id`='".(int)$categories_tab->fields['categories_id']."' AND p.`products_id`=pd.`products_id` AND p.products_status='1' AND pd.`language_id`='".(int)$_SESSION['languages_id']."' ORDER BY p.`products_sort_order`;";
$products_tab=$db->Execute($products_tab_query);
if($products_tab->RecordCount()>0)
{
echo '<ul>';
while (!$products_tab->EOF)
{
$cPath_new=zen_get_path($categories->fields['categories_id']);
$cPath_new=str_replace('=0_', '=', $cPath_new);
echo '<li>'.'<a href="'.zen_href_link(zen_get_info_page($products_tab->fields['products_id']),$cPath_new. '&products_id=' . $products_tab->fields['products_id']) . '">'.$products_tab->fields['products_name'].'</a></li>' . "\n";
$products_tab->MoveNext();
}
echo '</ul>' . "\n";
}
echo '</li>' . "\n";
$categories_tab->MoveNext();
}
echo '</ul>' . "\n";
}
?>
Then go to Admin >> Configuration >> Layout Settings
Turn On Categories-Tabs Menu
I think that should do it for you, you will need to play around with the CSS to get to look the way you want it to.
Hope this helps.
This may sound like a dumb question, but where do I put the first batch of coding? Does that go at the end of my templates CSS file?
Thanks!
