How do i get a category pulldown menu????

[paddy_uk2007]

Hi all

What am trying to do is create drop down menus across the top of my site. I want to have some of the category across the top and when scrolled over the drop down to display the subcategories in that category.

I know how to create a drop down menu but i don't know what bit of coding i need to add the the drop down to display the subcategories for that category.

like i said i want about 4 main categories going across the top then when scrolled over the sub categories to display for that category.

the sort of thing am after can be seen on this website

http://www.missguided.co.uk/

so if some one can tell me what bit of coding is needed to extract the sub categories I should then be able to sort it.

Thanks in advance

[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'].' -&gt;</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.

[paddy_uk2007]

Hi thanks for your reply, this is no good for me as I do not want all the categories across the top just some of them, also i want other drop down links to be in there like a help one with a drop down to other pages in my shop.

Like i said i know how to create a drop down i just need to know what code do i need to add to the drop down to display the subcategories.

for example if i add this to the drop down menu

<div id="dropmenu1" class="dropmenudiv">
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</div>

it displays all the main categories, but what code is needed to display subcategories for that category.

[kiddieshop]

The code I provided will display all top level categories and then it will also display the sub categories as well in a drop down menu

[paddy_uk2007]

The code I provided will display all top level categories and then it will also display the sub categories as well in a drop down menu

I know this but this is no good for what i want, as i do not want to display all my categories across the top, I only want to display some of them, and i want other links to be in there like home, help, contact us.......

[DrByte]

Try the category flyout addon as inspiration.

[paddy_uk2007]

Try the category flyout addon as inspiration.

I have looked at this but i cant find what code extracts the subcategories that's why i opened this thread

anyone help??

[paddy_uk2007]

Hi, can anyone tell me what bit of coding is needed to add to a file to extract all the subcategories from a particular category.

for example lets say i have 4 different main categories and each one have 3 different subcategories.

what code would be needed to extract the subcategories for each main category. ??? I was thinking i would probably have to include the category number in the coding so it knows what subcategories to extract.

Hope yous understand what it is am asking lol .

I have figured out that the following bit of coding extracts all the main categories

<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>

but am after the subcategories for a specific category.

Please can anyone help
thanks

[kobra]

Hi, can anyone tell me what bit of coding is needed to add to a file to extract all the subcategories from a particular category.

What are you attempting to do with this?
What is your end goal?

[paddy_uk2007]

What are you attempting to do with this?
What is your end goal?

I want to have them in a drop down menu, and be4 anyone says try this mod

http://www.zen-cart.com/index.php?ma...oducts_id=1448

this is no good for what i want to do, as i do not want all the categories across the top, just some of them and also want other links in there like like help, contact us etc..

can any one help???