Horizontal Cat Tree

[jeanne-inc]

Does anyone have some example code to create a horizontal Cat Tree across the top where the default Nav Bar is now? I have Emporium Tool Kit that should help but am just not sure how to get started. The main menu categories and subcategories are all identified now in a side Cat Tree with the default drop down subs. Thanks.<br><br>John

[PCINET - Andreas]

Re: Horizontal Cat Tree

toolkit has a nice example to output the category tree. You can find it here http://www.emporiumplus.com/v5/tk_tree.txt

using toolbelt you got one function which outputs the category tree as a UL list. Using parameters you can add styles or use the preset once. http://www.pcinet.com/docs/toolbelt_...tTree_Expanded

[Datagg]

Re: Horizontal Cat Tree

Is that toolkit example a horizontal layout? - Anyone using it so I can see how it works.

[jeanne-inc]

Re: Horizontal Cat Tree

No, the Tool Kit is not set up as is to be horizontal. If anyone knows a way to adjust it to make it this way, please post.

[PCINET - Andreas]

Re: Horizontal Cat Tree

Just change the table to a UL list and use CSS to format it :)

[Ron Frigon]

Re: Horizontal Cat Tree

Here's an example of a horizontal cattree using toolkit from http://www.avinylfence.com/

Nav Bar:

<nav id="navbar">
<mvt:item name="toolkit" param="parentcat|pccount" />
<ul class="dropdown flyout clearfix">
<li><a href="http://&mvt:global:domain:name;/" title="Home">Home</a></li>
    <mvt:foreach iterator="parent_category" array="parent_categories">
        <li><a href="http://&mvt:global:domain:name;/category/&mvte:parent_category:code;.php" title="&mvte:parent_category:name;">&mvte:parent_category:name;</a>
            <mvt:item name="toolkit" param="subcat|ccount|l.all_settings:parent_category:code" />
            <mvt:if expr="ccount GT 0">
                <ul class="sub-menu">
                    <mvt:foreach iterator="sub_category" array="sub_categories">
                        <li><a href="http://&mvt:global:domain:name;/category/&mvte:sub_category:code;.php" title="&mvte:sub_category:name;">&mvte:sub_category:name;</a>
                            <mvt:item name="toolkit" param="subcat2|ccount2|l.all_settings:sub_category:code" />
                            <mvt:if expr="ccount2 GT 0">
                                <ul>
                                    <mvt:foreach iterator="sub_category2" array="sub_categories2">
                                        <li><a href="http://&mvt:global:domain:name;/category/&mvte:sub_category2:code;.php" title="&mvte:sub_category2:name;">&mvte:sub_category2:name;</a></li>
                                    </mvt:foreach>
                                </ul>
                            </mvt:if>
                        </li>
                    </mvt:foreach>
                </ul>
            </mvt:if>
        </li>
    </mvt:foreach>
</ul>
</nav>

CSS:

/* ----- top level category list ----- */
.dropdown {
position: relative;
margin: 0;
padding: 0;
}


.dropdown a:hover {
}


.dropdown a:active {
}


.dropdown li {
font-weight: bold;
float: left;
zoom: 1;
vertical-align: middle;
list-style: none;
margin: 0;
padding: 0;
}


.dropdown li a {
display: block;
padding: 10px 12px;
text-decoration: none;
}


.dropdown li:last-child a {
}


.dropdown li.hover,
.dropdown li:hover {
position: relative;
}


.dropdown li.hover a {
}


.dropdown code {
padding: 0 0 0 10px;
}


/* ----- second level category list ----- */
.dropdown ul {
border-top: 3px solid #602E20;
background: #E1E0ED;
width: 145px;
visibility: hidden;
position: absolute;
top: 35px;
left: 0px;
padding: 5px;
margin: 0;
}


.dropdown ul li {
font-weight: normal;
border-bottom: 1px dotted #602E20;
float: none;
}


.dropdown ul li a {
border-right: none;
display: block;
}


.dropdown .sub-menu code {
padding: 0;
display: inline;
position: absolute;
right: 10px;
}


ul.sub-menu    {
border-right: 1px solid #602E20;
border-bottom: 1px solid #602E20;
border-left: 1px solid #602E20;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;    
}


ul.sub-menu li a    {
padding: 5px 10px;
}


/* ----- third level category list ----- */
.dropdown ul ul {
left: 100%;
top: -8px;
border-right: 1px solid #602E20;
border-bottom: 1px solid #602E20;
border-left: 1px solid #602E20;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}


.dropdown li:hover > ul {
visibility: visible;
}


/* ----- use to convert the menu to a vertical layout for the category tree ----- */
.flyout {
/*width: 180px;*/
}
.flyout li {
/*float: none;*/
}
.flyout ul {
/*top: 0;
left: 100%;*/
}

Javascript:

// ---- Category Tree ---- //        $(document).ready(function () {    if ($.browser.msie && $.browser.version.substr(0, 1) < 7 ) {        $('ul.dropdown li').hover(function () {            $(this).addClass('hover');            $('ul:first', this).css('visibility', 'visible');        }, function () {            $(this).removeClass('hover');            $('ul:first', this).css('visibility', 'hidden');        });    };    $('ul.dropdown:not(.flyout) li:has(ul.sub-menu)').find('a:first').append('<code>▼</code>');    $('ul.flyout li:has(ul.sub-menu)').find('a:first').append('<code>▼</code>');    $('ul.dropdown li ul li:has(ul)').find('a:first').append('<code>►</code>');});

Cheers!

[jeanne-inc]

Re: Horizontal Cat Tree

Thanks for posting this code. The horizontal cat tree on your site is like I want. I have a few questions if you don't mind helping a little more. I pasted the Nav Bar code into the Nav Bar template and I uploaded the CSS code. I am unsure where to put the Javascript code. Since you had Category Tree in the opening remarks, does the Javascript belong in that template? Although I have only pasted the Nav Bar and CSS, I looked at the results and see a normal, vertical category tree with all the subs open. So clearly I have not done all that is needed. What should I check next and will the Javascript placement help with the display? Thanks for your help.

[Ron Frigon]

Re: Horizontal Cat Tree

Can you post a link to your site? I'll take a look.

I have the javascript load from an external file with other scripts.

[jeanne-inc]

Re: Horizontal Cat Tree

My "live" site is in Miva 4. I am in the process of switching to Miva 5 and it is still very much in development stage and is only live for testing. I left the main page with all its problems when I copied your Nav Bar code. I have not done anything with the Javascript yet. You will see that there are WAY too many subs being displayed. My original Cattree on the side is displayed at the lowest part of the screen. In that menu I cut out all the subcategories I did not want to display with the statement:

<mvt:if expr=" NOT('_' IN l.settings:cattree_category:code)">

I would eventually add this to your code once I see how everything works. But I need to get it horizontal first. Here is the link:

http://beta.jeanne-inc.com/mm5/merchant.mvc?Screen=SFNT&Store_Code=JI

Thanks for your input.

[Ron Frigon]

Re: Horizontal Cat Tree

When I view the page source I don't see that there is a css file being loaded. There should be a link to your external css file in your <head> tag.

This will work without the javascript. It only adds the dropdown arrows and makes it play nice with old versions of ie.

You'll also need to edit the link structure of the nav bar to match your store. The example is set up for short links.

[jeanne-inc]

Re: Horizontal Cat Tree

Thanks a lot. I am making progress now. I still have a lot of categories to combine to make this fit but I see a small flicker of the light at the end... Somewhere the original category tree is still finding its way: no categories but the highlighted area still shows.

[Ron Frigon]

Re: Horizontal Cat Tree

Looks like you're getting close. Just add some more css to style your nav bar links, font size, font style etc. You can also assign some styles to the navbar, give it a background color for example.

Here's what I have on the other site for an example:

#navbar {
    background-color: #E1E0ED;
    border-bottom: 3px solid #602E20;
    height: 35px;
    margin-bottom: 10px;
    width: 990px;


}

You may also want to change <nav id="navbar"> to <div id="navbar"> if you're not using html 5.

Cheers!

[jeanne-inc]

Re: Horizontal Cat Tree

Ron, How did you get the background color for the top level cattree bar? Is it in your CSS code or did you create a table, with colored background, for the cattree? I see in the CSS where the subcategory color is defined. My home page is shaping up nicely although not finished yet.

[Ron Frigon]

Re: Horizontal Cat Tree

CSS, see the previous post.

[jeanne-inc]

Re: Horizontal Cat Tree

Opps, I forgot to add that to the CSS file. Sorry for not noticing the obvious.