Trying to make 2-layered menu by modifying categories side box

[jamesdavid]

This is my current menu;
http://www.jameschetwood.com/menu/men.jpg

This is the menu Im trying to make;
http://www.jameschetwood.com/menu/menuiwant.jpg

Ive set the categories side box to show sub categories and im assuming that the best way to achieve the menu I want is to find appropriate bit of PHP and copy it into the header, and then use CSS to position it.

Is there a way of turning off the side boxes header which says ‘Categories’ and the footer which says ‘New Products’ and ‘All Products’ so I could copy the entire contents of the tpl_index_categories.php file, or should I just copy some of the PHP, and if so which is the bit I need?

Thanks a lot
James

[kuroi]

Turning of the categories sidebox can be done easily via Admin > Tools > Layout Box Controller.

Adding the second layer menu however, is rather more difficult. The most direct route would be to change way in which the header is built to mimic the way in which the category sidebox expands. For this I'd recommend looking at the category tree class.

Simpler sounding, but more tricky in practice would be to relocate the category sidebox into the header. The new and all product links can be turned off via the Admin > Configuration > Layout Settings.

If your categories won't change much, a third solution with less programming would be to use the EZ-Pages Table of Contents feature to create a two level menu system.

All of these solutions will require a good knowledge of how Zen Cart works, quite advanced CSS skills and varying degrees of PHP programming ability.

[jamesdavid]

I was going to try and modify the category side box but ill take your word that the category tree class is the way to go.

Is this be best link for the category tree class?

http://www.zen-cart.com/forum/showth...ory+tree+class

thanks

[nev]

you might also consider using the existing css horizontal drop down menu mod as a start

http://www.zen-cart.com/index.php?ma...roducts_id=479

it will provide the files/code needed to dynamically display the categories in the header, so you don’t have to worry about the code. With some minor adjustments you can change how deep you want the sub category levels to display. i cut mine off on the 2 level subcategory.

What you are looking for is in reality a unordered list displayed horizontally and not vertically. so if the main menu level can be displayed horizontally with css, like it often is on many pages, then the sub-menu level can do the same. the only difference with what is usually used for the sub menu is a fly out on hover, and you want it to stay visible depending in what category you are in.

have a look at the css and html code at the two links below and make the adjustments to the stylesheet_header_menu.css & the html in tpl_ files that came with the above mod to get the look you want. (they dont have to lok like tabs, that is just css styling)

http://www.dynamicdrive.com/style/cs...css-tabs-menu/

or this one
http://labs.silverorange.com/archive.../updatedsimple

to see it in action
http://labs.silverorange.com/images/...ate/about.html

this would probably be a lot easier than the other options you are considering

nev

[jamesdavid]

Thanks for your post Nev, you seem very informed for a 'new zenner'.

A few people have recommended I edit the CSS flyout mod so there must be some good reasoning to it. I can see how you could use CSS to make the drop down appear horizontally.

My only reservation is that the menu then needs to stay in place after you click the link you want. How would one do this?

If you look at;
http://www.jameschetwood.com/menu/menuiwant.jpg

After you click; Gem Colours - Green Gems -
You need to be taken to the Green Gems product page, and the menu needs to stay 'extended'.

How hard is this to do?
thanks
james

[nev]

new zenner means just that, new to the zen forum, and in my case new to php. (x)html and css are another story.

Most CSS menus are nothing more than unordered lists. Made to display in a certain way (horizontal, vertical, fly-out on hover, permanent) and made pretty with CSS styling.

My only reservation is that the menu then needs to stay in place after you click the link you want. How would one do this?

To answer that question in an ordinary html page it would be done like this:
Using the second example link I gave you

When you are on the Home page

<ul id="primary">
	<li><a href="index.html">Home</a></li>
	<li><a href="login.html">Log In</a></li>
	<li><a href="gem-colours.html">Gem Colours</a></li>
	<li><a href="portfolio.html">Stamp Tool</a></li>
</ul>

When you are on the Gem Colours page:

<ul id="primary">
	<li><a href="index.html">Home</a></li>
	<li><a href="login.html">Log In</a></li>
	<li><span>Gem Colours</span>
		<ul id="secondary">
			<li><a href="black-gems.html">Black Gems</a></li>
			<li><a href="clear-gems.html">Clear Gems</a></li>
			<li><a href="pink-gems.html">Pink Gems</a></li>
			<li><a href="r-blue-gems.html">Royal Blue Bems</a></li>
			<li><a href="blue-gems.html">Blue Gems</a></li>
			<li><a href="silver-studs.html">Silver Studs</a></li>
		</ul>
	</li>
	<li><a href="stamp-tool.html">Stamp Tool</a></li>
</ul>

Or if you want the Gem Colours to still be a link even then that is a selected category you can do

<li class=“selected”><a href="gem-colours.html">Gem Colours</a>

OK that established, you are working with html dynamically generated with php. That is where the contribution comes in. It has most of that code generated for you.

The unfortunate word in the last paragraph is ‘most’ what you don’t have there is the ability to dynamically change the “primary” level <li> to <li class=“selected”> when a category is selected, which would keep the styling of the selected category link different, and the ability to only display the second level links of the category you are on.

The problem is not keeping the links displayed when you are on a category. That part is clearly explained and visible in the links I gave you for how to create a 2 level menu. The problem is generating the second level links ONLY for the primary level you are on.

The way the menu works now, is that is creates a ul list of all the links to all the sub pages all the time. And then only the ones you are looking at are visible by hover.

So option 1 modify the code, you or someone else, to do that – this would make a nice additional contribution

Option 2:

Ok so while pondering the solution for this, in case you don’t know how to change the php code or can’t get anyone to help, I have this idea (a somewhat vague one I must admit – but it should give you a direction) you should be able to make this work using the zen overrides. There are some FAQ’s and some posts in the forum that might help with how exactly this needs to be set up. But from what I remember reading you can change the look of a particular page or pages in a category. So if you want category Shoes to look different from the rest and category Shoes is category ID#4 then you would add to the stylesheet and tpl pages a cPath=4 for that category.

Have a look at this post, it explains the process. http://www.zen-cart.com/forum/showthread.php?t=59142, there are others, search the forum.

Now, once you figure how that override works, you need to split the menu into 2 options, substituting the whole header menu instead of the #logoWrapper like in the example.

If you have a second level menu only in the Gems Color then this should be relatively easy. If you have it in more than one main menu level then you have to create this for each.

Ok take the contribution and split it. Main file that will be used on all pages except when Gams Colour is selected will not have any of the dynamically generated content in tpl_drop_menu.php the second option will use the UL-generator and display it, horizontally, and change the class of the <li>Gem Colour</li>

I soo hope this made sense.

Hmm ok, this just occurred to me, not sure it will work, should in theory unless I missed something.

So here is Option 3

Use the same forums post for example as above and substitute the #logoWrapper in the example with div#dropMenu from the tpl_drop_menu.php
For the css use the styling principles that I gave you the link to in the previous post.

So you will have

div#dropMenu_1 ul.level1 ul.level2 ul.level3 li.submenu:hover ul.level4 {display:none;}

div#dropMenu_2 {bla bla whatever you define}

you might have to play with what exactly needs to be added to the list of display:none in the div#dropMenu_1 option.

I use div#dropMenu ul.level3 li.submenu:hover ul.level4 {display:none;} at the end of my css to stop the menu from displaying more than 2 sublevels. So I know this works. It should work with the cPath override.

I would try option 3 first there is almost no code to modify, seems the simplest, and if you follow the post instructions and figure out how the overrides work, it should work.

And now I’m out of ideas. When you get it to work, it would be nice to know what worked. If you get majorly stuck, ask.

hope this helps
nev

[jamesdavid]

wow, thanks a lot! Ive got a lot to work on, will let you know how it goes.