I need to show all the catagories

Post By:user_2286 | Reply

Good day,

I need to know if I can have all the categories show on my tool bar next to "Home" link on my Home page? I need to be able to shoe all the categories at all times.

Let me know..

-awk
user_18304Sat, 05 Dec 2009

The Link you are talking about is the breadbrumb that shows you where you currently are on the website. The category/subcategory (if available) and the name of the product

Use the following code and add to above or below the breadcrum in the header file located in /includes/templates/YOUR_TEMPLATE/common/tpl_header.php.
or have a look in the maddno section. There is a free contribution called Header dropdown menu.

Code:
<div id="dropMenu">        
<?php
 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 echo $menulist;
?>                
</div>
Stylesheet Information:

Code:
	
/*green*/
div#dropMenu li a:hover {color:#F05923;}


/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
div#dropMenu {
	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
    margin:0;
	padding:0;	
	}
	
div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	margin-bottom:3px;
	*line-height:1em;
	background: black;
	padding:0 15px;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {		
	text-align:center;
	background:red;	
	float:left;
	height:44px;
	margin:0 5px;
	width:948px;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac */
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: 10px 0; 
	text-decoration: none; 
	color:#151515;
	font-size:16px;
	font-weight:bold;
	font-family:verdana,arial,helvetica,sans-serif;
	text-align:center; 	
	}	

div#dropMenu ul.level1 li.submenu ul.level2 li {background:none;padding:0;}

div#dropMenu ul.level1 li.submenu li a {font-weight:normal;font-size:15px;}
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: blue;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {width:140px;}
/*div#dropMenu li.submenu li.submenu {blue;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 140px;display:block;}
div#dropMenu ul.level2 {background:white ;left:0;margin-left:-3px;padding:6px 15px 15px;width:140px;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{background:white;margin-left:-3px;padding:6px 15px 15px;width:140px;z-index:1000;position:absolute;top: 0; left: 140px;}
div#dropMenu ul.level2 a {padding: 2px 0;color: black; text-transform:none;background:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {font-weight:bold;background:#f5f5f5;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
	}

You have to add some style information to have a nice formatting.

user_18304Sat, 05 Dec 2009

The Link you are talking about is the breadbrumb that shows you where you currently are on the website. The category/subcategory (if available) and the name of the product

Use the following code and add to above or below the breadcrum in the header file located in /includes/templates/YOUR_TEMPLATE/common/tpl_header.php.
or have a look in the maddno section. There is a free contribution called Header dropdown menu.

Code:
<div id="dropMenu">        
<?php
 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 echo $menulist;
?>                
</div>
Stylesheet Information:

Code:
	
/*green*/
div#dropMenu li a:hover {color:#F05923;}


/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
div#dropMenu {
	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
    margin:0;
	padding:0;	
	}
	
div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	margin-bottom:3px;
	*line-height:1em;
	background: black;
	padding:0 15px;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {		
	text-align:center;
	background:red;	
	float:left;
	height:44px;
	margin:0 5px;
	width:948px;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac */
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: 10px 0; 
	text-decoration: none; 
	color:#151515;
	font-size:16px;
	font-weight:bold;
	font-family:verdana,arial,helvetica,sans-serif;
	text-align:center; 	
	}	

div#dropMenu ul.level1 li.submenu ul.level2 li {background:none;padding:0;}

div#dropMenu ul.level1 li.submenu li a {font-weight:normal;font-size:15px;}
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: blue;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {width:140px;}
/*div#dropMenu li.submenu li.submenu {blue;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 140px;display:block;}
div#dropMenu ul.level2 {background:white ;left:0;margin-left:-3px;padding:6px 15px 15px;width:140px;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{background:white;margin-left:-3px;padding:6px 15px 15px;width:140px;z-index:1000;position:absolute;top: 0; left: 140px;}
div#dropMenu ul.level2 a {padding: 2px 0;color: black; text-transform:none;background:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {font-weight:bold;background:#f5f5f5;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
	}

You have to add some style information to have a nice formatting.

user_2286Thu, 03 Dec 2009

Great news...

Here is a link to cart...
http://www.femmexstudios.com/FXS/ind...&products_id=3

As you can see there is a Category listed on the tool bar next to Home :: Now I have 5 other categories which I would like to have on the same tool bar , right after BLISS C O L L E C T I O N :: Black Satin, 4 1/4" Heel.

Let me know if this can be done? any suggestions is welcomed..

-awk

user_18304Thu, 03 Dec 2009

Yes you can do it. How you do it depends on what you already have on your website. A link may help to give some advice.

`Reply Or Comment!
Please LogIn to Reply!