X-Cart forums - 4 Level SEO friendly Flyout Menus

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - 4 Level SEO friendly Flyout Menus (https://forum.x-cart.com/showthread.php?t=32534)

4 Level SEO friendly Flyout Menus

After searching high and low for a mod that would work across browsers, expand to multiple lines, and go 4 levels deep, and keep the root categores sorted right, I decided to create my own. This is based on http://solardreamstudios.com/learn/css/cssmenus.

This works on 4.0x. It may work on 4.1x with some tweaking.

This uses an unordered list formatted with CSS, so you'll have a link on your front page to all your subcategories, which should boost their pagerank up to whatever pagerank your root level categories are. Just don't expent it to work overnight.

This was tested in IE6(XP), IE7(XP), Firefox (XP&Linux), Konqueror(Linux), Opera (Linux) and Safari (OSX).

First, create the directory 'menu' in your skin1 directory.

Inside that directory create menu.tpl and put in the following:

Code:

<ul id="navmenu">

{section name=l1_cat_num loop=$categories} 

    {if $categories[l1_cat_num].parentid eq 0} 

        <li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}

{if $categories[l1_cat_num].subcategory_count gt 0}

<ul>

{section name=l2_cat_num loop=$allcategories}

                    {if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid} 

                        <li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}

                    {if $allcategories[l2_cat_num].subcategory_count gt 0}

<ul>

        {section name=l3_cat_num loop=$allcategories}

                                {if $allcategories[l3_cat_num].parentid eq $allcategories[l2_cat_num].categoryid} 

                                    <li><a href="home.php?cat={$allcategories[l3_cat_num].categoryid}" alt="{$allcategories[l3_cat_num].category}">{$allcategories[l3_cat_num].category}{if $allcategories[l3_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}

                                {if $allcategories[l3_cat_num].subcategory_count gt 0}

<ul>

{section name=l4_cat_num loop=$allcategories}

                                            {if $allcategories[l4_cat_num].parentid eq $allcategories[l3_cat_num].categoryid}

                                                <li><a href="home.php?cat={$allcategories[l4_cat_num].categoryid}" alt="{$allcategories[l4_cat_num].category}">{$allcategories[l4_cat_num].category}</a></li>

                                {/if}{/section}</ul></li>

{/if}{/if}{/section}</ul></li>

{/if}{/if}{/section}</ul></li>

{/if}{/if}{/section}</ul>

Then create menu.css in the same directory with the following content:

Code:

/* Root = Vertical, Secondary = Vertical */

ul#navmenu,

ul#navmenu li,

ul#navmenu ul {

  margin: 0;

  border: 0 none;

  padding: 0;

  width: 148px; /*For KHTML*/

  list-style: none;

}



ul#navmenu:after /*From IE 7 lack of compliance*/{

  clear: both;

  display: block;

  font: 1px/0px serif;

  content: ".";

  height: 0;

  visibility: hidden;

}



ul#navmenu li {

  float: left; /*For IE 7 lack of compliance*/

  display: block !important; /*For GOOD browsers*/

  display: inline; /*For IE*/

  position: relative;

}



/* Root Menu */

ul#navmenu a {

  border: 2px solid #FFF;

  border-right-color: #AD9D8A;

  border-bottom-color: #AD9D8A;

  padding: 0 6px;

  display: block;

  background: #D2C6B2;

  color: #330000;

  font: normal 18px/22px Times New Roman, serif;

  text-decoration: none;

  height: auto !important;

  height: 1%; /*For IE*/

}



/* Root Menu Hover Persistence */

ul#navmenu a:hover,

ul#navmenu li:hover a,

ul#navmenu li.iehover a {

  background: #AD9D8A;

  color: #FFF;

}



/* 2nd Menu */

ul#navmenu li:hover li a,

ul#navmenu li.iehover li a {

  background: #D2C6B2;

  color: #330000;

}



/* 2nd Menu Hover Persistence */

ul#navmenu li:hover li a:hover,

ul#navmenu li:hover li:hover a,

ul#navmenu li.iehover li a:hover,

ul#navmenu li.iehover li.iehover a {

  background: #AD9D8A;

  color: #FFF;

}



/* 3rd Menu */

ul#navmenu li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li a {

  background: #D2C6B2;

  color: #330000;

}



/* 3rd Menu Hover Persistence */

ul#navmenu li:hover li:hover li a:hover,

ul#navmenu li:hover li:hover li:hover a,

ul#navmenu li.iehover li.iehover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover a {

  background: #AD9D8A;

  color: #FFF;

}



/* 4th Menu */

ul#navmenu li:hover li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li.iehover li a {

  background: #D2C6B2;

  color: #330000;

}



/* 4th Menu Hover */

ul#navmenu li:hover li:hover li:hover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover li a:hover {

  background: #AD9D8A;

  color: #FFF;

}



ul#navmenu ul,

ul#navmenu ul ul,

ul#navmenu ul ul ul {

  display: none;

  position: absolute;

  top: 0;

  left: 148px;

}



/* Do Not Move - Must Come Before display:block for Gecko */

ul#navmenu li:hover ul ul,

ul#navmenu li:hover ul ul ul,

ul#navmenu li.iehover ul ul,

ul#navmenu li.iehover ul ul ul {

  display: none;

}



ul#navmenu li:hover ul,

ul#navmenu ul li:hover ul,

ul#navmenu ul ul li:hover ul,

ul#navmenu li.iehover ul,

ul#navmenu ul li.iehover ul,

ul#navmenu ul ul li.iehover ul {

  display: block;

}

IE, being what it is, needs a little javascript help. So create menu.js in the same directory.

Code:

navHover = function() {

    var lis = document.getElementById("navmenu").getElementsByTagName("LI");

    for (var i=0; i<lis.length; i++) {

        lis[i].onmouseover=function() {

            this.className+=" iehover";

        }

        lis[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" iehover\\b"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", navHover);

Now edit /skin1/customer/home.tpl to add the new menu.tpl, a link to the CSS and js file. Add the following right before </head>:

Code:

<LINK rel="stylesheet" href="{$SkinDir}/menu/menu.css">

<!--[if gte IE 5.5]>

<script language="JavaScript" src="{$SkinDir}/menu/menu.js" type="text/JavaScript"></script>

<![endif]-->

And replace

Code:

{ include file="customer/categories.tpl" }

with:

Code:

{ include file="menu/menu.tpl" }

Also, you need to add this to the top of your /skin1/customer/home.tpl:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

There, that wasn't so hard, was it?

I don't have a link to an example as I'm still awaiting approval, but you can get a basic idea from the link referenced at the beginning of this post.

Re: 4 Level SEO friendly Flyout Menus

Looks good there AllTribes, shame we can't use it though, every fly out menu modification we've tried just cannot handle the fact we have 16,601 categories that go down 5 levels deep unfortunately, but kuduos to you on the mod.

Re: 4 Level SEO friendly Flyout Menus

Adding a 5th level shouldn't be too hard, however the subcategories are not sorted correctly. That may take a bit more tweaking.

Re: 4 Level SEO friendly Flyout Menus

Well the organization isn't the problem is the sheer amount of categories we're talking some categories having easily 2 or 3 thousand sub-categories alone that just boggs the site down. Besides we have another form of navigation anyway that's far more efficent for our needs since we have close to 89 thousand products in our database.

Re: 4 Level SEO friendly Flyout Menus

Yes, in 4.1.7 in doesn't work in a proper way.

Re: 4 Level SEO friendly Flyout Menus

4.1.X requires major code changes in order for the categories to display. The following is based off of what others have posted (I just extended it to 4 levels deep). The associated CSS can be generated/found here and be sure to add this. I've named mine "flyout" but I believe the link named it something else so be sure to change it to match. This is still somewhat of a work-in-progress, for me IE has display issues (ie note how the root level looks compared to the other levels) but maybe it won't be a major problem if you know your way around CSS which I don't. If you want to work around with it, I'd love to see it fixed up!

The code is just what I did and it "should" work. I'm still looking to make it more efficient or remove any unnecessary code. For numerous categories, you can generate a static one and place it in, but you'll probably have to update it continuously (depending on how you configured your product options) - this is dynamic. Very similar to what's offered here but is done with what was provided on the forum, a little tweaking of my own, and the CSS site I linked above - I think in my version it fixes up some minor HTML issues that exists in the XCartMods one (such as empty LI / UL / etc).

Works with CDSEO to the best of my knowledge. Completely CSS driven (I think :P)
Root
- Level 1
- Level 2
- Level 3

Code:

<div class="flyout">

   <ul>

   {foreach from=$categories item=cRoot name="RootCat"}

      {assign var=in value=$cRoot.categoryid}

      {if $allsubcategories.$in ne ''}

         {if $smarty.foreach.RootCat.last}

            <li><a href="home.php?cat={$cRoot.categoryid}" class="flyoutlast"><b>»</b>{$cRoot.category|escape:'html'}<!--[if IE 7]>

         {else}

            <li><a href="home.php?cat={$cRoot.categoryid}"><b>»</b>{$cRoot.category|escape:'html'}<!--[if IE 7]>

         {/if}

      {else}

         {if $smarty.foreach.RootCat.last}

            <li><a href="home.php?cat={$cRoot.categoryid}" class="flyoutlast">{$cRoot.category|escape:'html'}<!--[if IE 7]>

         {else}

            <li><a href="home.php?cat={$cRoot.categoryid}">{$cRoot.category|escape:'html'}<!--[if IE 7]>

         {/if}

      {/if}

         <!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

      {if $allsubcategories.$in ne ''}

         <ul>

         {foreach from=$allsubcategories.$in item=sc1 name="SubCategory_Level1"}

            {assign var=in2 value=$sc1.categoryid}

            {if $allsubcategories.$in2 ne ''}

               {if $smarty.foreach.SubCategory_Level1.last}

                  <li><a href="home.php?cat={$sc1.categoryid}" class="flyoutlast"><b>»</b>{$sc1.category|escape:'html'}<!--[if IE 7]>

               {else}

                  <li><a href="home.php?cat={$sc1.categoryid}"><b>»</b>{$sc1.category|escape:'html'}<!--[if IE 7]>

               {/if}

            {else}

               {if $smarty.foreach.SubCategory_Level1.last}

                  <li><a href="home.php?cat={$sc1.categoryid}" class="flyoutlast">{$sc1.category|escape:'html'}<!--[if IE 7]>

               {else}

                  <li><a href="home.php?cat={$sc1.categoryid}">{$sc1.category|escape:'html'}<!--[if IE 7]>

               {/if}

            {/if}

            <!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

            {if $allsubcategories.$in2 ne ''}

               <ul>

               {foreach from=$allsubcategories.$in2 item=sc2 name="SubCategory_Level2"}

                  {if $smarty.foreach.SubCategory_Level2.last}

                     <li><a href="home.php?cat={$sc2.categoryid}" class="flyoutlast">{$sc2.category|escape:'html'}</a></li>

                  {else}

                     <li><a href="home.php?cat={$sc2.categoryid}">{$sc2.category|escape:'html'}</a></li>

                  {/if}

               {/foreach}

               </ul>

            {/if}

            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

         {/foreach}

         </ul>

      {/if}

      <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

   {/foreach}

   </ul>

   </div>

Re: 4 Level SEO friendly Flyout Menus

Quote:

Originally Posted by Alan Brault

Besides we have another form of navigation anyway that's far more efficent for our needs since we have close to 89 thousand products in our database.

Ok, you've made me curious, what other form of navigation are you using?

Re: 4 Level SEO friendly Flyout Menus

I'd be curious to see that too. That's a lot of products.

Jason

Re: 4 Level SEO friendly Flyout Menus

Thanks nevets1219, I got further with that under 4.1.8 than with the Alltribes solution. You're referencing a class called "flyoutlast" that doesn't appear in the CSS you reference (which has one class, called menu). Is there a way you can post the CSS you used? It looks like the web reference you provide might contain a different or updated CSS.

Thanks.

Re: 4 Level SEO friendly Flyout Menus

Quote:

I think in my version it fixes up some minor HTML issues that exists in the XCartMods one (such as empty LI / UL / etc).

I've managed to fix that issue now :)

Re: 4 Level SEO friendly Flyout Menus

Quote:

Originally Posted by JWait

Ok, you've made me curious, what other form of navigation are you using?

We made some particular modifications into how navigation of categories, sub-categories and products go with X-Cart's logic. First off we keep our sidebar menu for categories pretty much the standard one, except that it doesn't keep root categories it follows the user as they go deeper into our tree. Second I made code modifications to products.php and product.php to ensure that the category menu still displays no matter what (in this case it displays the last level they were in when they visited the products).

The other is we modified how a user browses our site, instead of constantly using the sidebar menu I made modifications to subcategories.tpl (and cloned it for the welcome.tpl file) that displays a list of categories and then their subcategories or products in a column'd list. This makes for much easier navigation in our site. A screenshot of what it looks like with both categories that have subcategories and categories that only have products occupying the same tree.

We also limit the list of products in this layout to about no more than 6 to prevent severe flooding.

Re: 4 Level SEO friendly Flyout Menus

Quote:

Originally Posted by 1CNS

The 2nd link in my post (found here) has mentioned a "last" and that's where I got it from. I hope I used it correctly. My CSS is essentially the one generated from the Menu Builder and that other paged linked above. To be honest, I didn't really pay attention to see what display changes it made though :P

On a side note, I've used "escape" modifiers in my code, it might screw up the display of your categories depending on what you have (ie your categories should have & and not & otherwise the 'escape' modifier will screw things up). Remove it as you feel necessary.

PhilJ, glad your version is one step closer to perfection if it's not already there :D

Re: 4 Level SEO friendly Flyout Menus

I was looking for something just like this! What would I need to do to make this function within my current template and categories? I replaced the { include file="customer/categories.tpl" } with the { include file="menu/menu.tpl" } and lost the categories layout of the website.

Re: 4 Level SEO friendly Flyout Menus

To use this in 4.1x you just need to fix the menu.tpl to display your categories as an unordered list. The CSS and JS should work the same. There is no need for any tables or IE conditional statements if you use the CSS and JS I provided.

Re: 4 Level SEO friendly Flyout Menus

Thank you for the reply. I realized from your response I had the wrong version of X-Cart listed. I actually have 4.0.13. Would the needed changes be the same?

Re: 4 Level SEO friendly Flyout Menus

alltribes, nice mod, but doesn't work properly in 4.1.8 (as "$allcategories" doesn't list all of the categories by default in 4.1.8)

also, the template itself could be cleaned up a bit as well. i'll post a revised copy later

Re: 4 Level SEO friendly Flyout Menus

Quote:

Originally Posted by flyclothing

Thank you for the reply. I realized from your response I had the wrong version of X-Cart listed. I actually have 4.0.13. Would the needed changes be the same?

Hmm, it should work. Does anything at all show up?

Re: 4 Level SEO friendly Flyout Menus

yes, the "current" level of categories are retrieved, but not all, so it doesn't recurse deeper

in 4.1, the request for the categories array is handled by this bit of code:

Code:

#

# Gather the array of categories and extract into separated arrays:

# $all_categories, $categories and $subcategories

#

if (($current_area == "C" && defined("GET_ALL_CATEGORIES")) || defined('MANAGE_CATEGORIES')) {

        $_categories = func_get_categories_list($cat);

} elseif($current_area == "C") {

        $_categories = func_get_categories_list($cat, true, "current");

} else {

        $_categories = func_get_categories_list($cat, true, "all");

}

note the

Quote:

defined("GET_ALL_CATEGORIES")

bit of code

the only place i found GET_ALL_CATEGORIES defined was in search.php, so for my site, I added the define to the top of home.php:

Code:

define("GET_ALL_CATEGORIES",true);

that fixed up the need for the nested categories. i also fixed up some of the logic (if statements) in the code. i'll prepare a proper post tonight with full instructions (will be similar to your first post)

Re: 4 Level SEO friendly Flyout Menus

Posted this thread for your mod, for 4.1.x, you can see my code changes there, and I gave full credit to you

http://forum.x-cart.com/showthread.php?p=178820

Re: 4 Level SEO friendly Flyout Menus

alltribes,

Thank you for the great mod! I am trying to integrate this with my current layout. Here are the two templates. How can I mix these two templates to match my current layout?

CATEGORY TEMPLATE (CURRENT CATEGORY TEMPLATE)

{* $Id: categories.tpl,v 1.23 2004/06/24 09:53:29 max Exp $ *}
<div id="categories">
{capture name=menu}
{if $active_modules.Fancy_Categories ne ""}
{include file="`$fancycategories_config.modules_path`/fancy_categories.tpl"}
{else}
{if $config.General.root_categories eq "Y"}
{section name=cat_num loop=$categories}
{* SAFETYNET DSEFU MOD *}
{if $enable_seo_links == "Y"}
<FONT class="CategoriesList"><A href="{seo_link cat_name=$categories[cat_num].category cat_id=$categories[cat_num].categoryid}" class="VertMenuItems_top">{$categories[cat_num].category}</A></FONT>
{else}
<FONT class="CategoriesList"><A href="home.php?cat={$categories[cat_num].categoryid}" class="VertMenuItems_top">{$categories[cat_num].category}</A></FONT>
{/if}
{* END SAFETYNET DSEFU MOD *}
{/section}
{else} {section name=cat_num loop=$subcategories}
{if $enable_seo_links == "Y"}
<FONT class="CategoriesList"><A href="{seo_link cat_name=$subcategories[cat_num].category cat_id=$subcategories[cat_num].categoryid}" class="VertMenuItems_top">{$subcategories[cat_num].category}</A></FONT>
{else}
<FONT class="CategoriesList"><A href="home.php?cat={$subcategories[cat_num].categoryid}" class="VertMenuItems_top">{$subcategories[cat_num].category}</A></FONT>
{/if}
{* END SAFETYNET DSEFU MOD *}
{/section}
{/if}
{/if}
{/capture}
{ include file="menu_categories.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }
</div>

MENU TEMPLATE (YOUR MOD)

<ul id="navmenu">
{section name=l1_cat_num loop=$categories}
{if $categories[l1_cat_num].parentid eq 0}
<li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $categories[l1_cat_num].subcategory_count gt 0}
<ul>
{section name=l2_cat_num loop=$allcategories}
{if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l2_cat_num].subcategory_count gt 0}
<ul>
{section name=l3_cat_num loop=$allcategories}
{if $allcategories[l3_cat_num].parentid eq $allcategories[l2_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l3_cat_num].categoryid}" alt="{$allcategories[l3_cat_num].category}">{$allcategories[l3_cat_num].category}{if $allcategories[l3_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l3_cat_num].subcategory_count gt 0}
<ul>
{section name=l4_cat_num loop=$allcategories}
{if $allcategories[l4_cat_num].parentid eq $allcategories[l3_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l4_cat_num].categoryid}" alt="{$allcategories[l4_cat_num].category}">{$allcategories[l4_cat_num].category}</a></li>
{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul>

Re: 4 Level SEO friendly Flyout Menus

Hi,I have been using this fly out menu for about a year now and it works fine .The only problem I am having is I have lost the "CATEGORY" title bar at the top of the category list .Has anyone got a fix for this by any chance ?

Re: 4 Level SEO friendly Flyout Menus

Make sure you have...

{include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu cellpadding=$fc_cellpadding}

at the bottom of the skin1/menus/vert.tpl. The menu_title=$lng.lbl_categories part is what displays the title. Make sure it is not blank in your "Languages" section of admin.

Re: 4 Level SEO friendly Flyout Menus

can disappearance of the menu be delayed by means of JS?

Re: 4 Level SEO friendly Flyout Menus

Quote:

Originally Posted by JWait

Make sure you have...

{include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu cellpadding=$fc_cellpadding}
at the bottom of the skin1/menus/vert.tpl. The menu_title=$lng.lbl_categories part is what displays the title. Make sure it is not blank in your "Languages" section of admin.

Thanks for the quick response.Now if only I have a skin1/menus/vert.tpl.
The original 4 level flyout instructions did not specify to create one .I created skin1/menu/menu.tpl+ //menu.js+// menu. css.I already had skin1/menu.tpl and skin 1.menu_profile.tpl.
Languages is not blank

Re: 4 Level SEO friendly Flyout Menus

My bad. We are using the mod from http://www.xcartmods.co.uk.
How old is your version? I asked about this and found there was an updated one. The one we had on our x-cart 4.0.19 site had the folder named "v4menu". The new version had us name the folder "menus".

Re: 4 Level SEO friendly Flyout Menus

I am using 4.0.19.I am using the ALLTRIBES fly out menu as above .I do not "vmenu" or 'menus"

Re: 4 Level SEO friendly Flyout Menus

If anyone is interested I put this flyout inside the "pure css round corner menu ."This solved both problems of not having category title as in prevoius post and uniforming the design .
In menu/menu tpl
<div class="xrounded">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Categories</h1>
<div><p>
{$menu_content}</p></div>
</div>
<ul id="navmenu">
{section name=l1_cat_num loop=$categories}
{if $categories[l1_cat_num].parentid eq 0}
<li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $categories[l1_cat_num].subcategory_count gt 0}
<ul>
{section name=l2_cat_num loop=$allcategories}
{if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l2_cat_num].subcategory_count gt 0}
<ul>
{section name=l3_cat_num loop=$allcategories}
{if $allcategories[l3_cat_num].parentid eq $allcategories[l2_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l3_cat_num].categoryid}" alt="{$allcategories[l3_cat_num].category}">{$allcategories[l3_cat_num].category}{if $allcategories[l3_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l3_cat_num].subcategory_count gt 0}
<ul>
{section name=l4_cat_num loop=$allcategories}
{if $allcategories[l4_cat_num].parentid eq $allcategories[l3_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l4_cat_num].categoryid}" alt="{$allcategories[l4_cat_num].category}">{$allcategories[l4_cat_num].category}</a></li>
{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
I also adjusted the width in skin 1 css

Re: 4 Level SEO friendly Flyout Menus

Anybody else having an issue with the v4menu in IE 8?

Re: 4 Level SEO friendly Flyout Menus

... never mind, figured it out. Just change all of the [if IE 7] to [if gte IE 7].

Re: 4 Level SEO friendly Flyout Menus

Installed and working on my 4.0.18 cart, but why doesn't is fly out for all cats? I modded the code to only fly out only one level, but it seems to only want to do it for some of them not all of them.

Quote:

Originally Posted by 0

<ul id="navmenu">
{section name=l1_cat_num loop=$categories}
{if $categories[l1_cat_num].parentid eq 0}
<li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}</a>{else}</a></li>{/if}
{if $categories[l1_cat_num].subcategory_count gt 0}
<ul>
{section name=l2_cat_num loop=$allcategories}
{if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}</a>{else}</a></li>{/if}
{if $allcategories[l2_cat_num].subcategory_count gt 0}

{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul>