X-Cart: shopping cart software
Page 1 of 3 1 23 >
Show 40 posts from this thread on one page

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)

Alltribes 07-13-2007 11:04 AM
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.

exsecror 07-13-2007 11:28 AM
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.

Alltribes 07-13-2007 11:53 AM
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.

exsecror 07-13-2007 12:00 PM
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.

vtonya 07-13-2007 12:48 PM
Re: 4 Level SEO friendly Flyout Menus
 
Yes, in 4.1.7 in doesn't work in a proper way.

nevets1219 07-13-2007 12:59 PM
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>

JWait 07-15-2007 06:49 AM
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?

Jayk 07-15-2007 06:54 AM
Re: 4 Level SEO friendly Flyout Menus
 
I'd be curious to see that too. That's a lot of products.

Jason

1CNS 07-15-2007 08:37 PM
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.

PhilJ 07-16-2007 02:36 AM
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 :)


All times are GMT -8. The time now is 09:42 PM.
Page 1 of 3 1 23 >
Show 40 posts from this thread on one page

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.