Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

4 Level SEO friendly Flyout Menus

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 07-13-2007, 11:04 AM
  Alltribes's Avatar 
Alltribes Alltribes is offline
 

Senior Member
  
Join Date: Dec 2004
Posts: 192
 

Default 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.
__________________
Alltribes.com
Native American Jewelry
Pottery, Baskets, Kachinas & More

X-cart Gold Version 4.0.17 Live
PHP 5.2.6
MySQL 4.1.25
(mt)
Reply With Quote

The following user thanks Alltribes for this useful post:
sightless (12-22-2010)
  #2  
Old 07-13-2007, 11:28 AM
 
exsecror exsecror is offline
 

X-Wizard
  
Join Date: Apr 2007
Posts: 1,284
 

Default 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.
Reply With Quote
  #3  
Old 07-13-2007, 11:53 AM
  Alltribes's Avatar 
Alltribes Alltribes is offline
 

Senior Member
  
Join Date: Dec 2004
Posts: 192
 

Default 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.
__________________
Alltribes.com
Native American Jewelry
Pottery, Baskets, Kachinas & More

X-cart Gold Version 4.0.17 Live
PHP 5.2.6
MySQL 4.1.25
(mt)
Reply With Quote
  #4  
Old 07-13-2007, 12:00 PM
 
exsecror exsecror is offline
 

X-Wizard
  
Join Date: Apr 2007
Posts: 1,284
 

Default 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.
Reply With Quote
  #5  
Old 07-13-2007, 12:48 PM
  vtonya's Avatar 
vtonya vtonya is offline
 

Advanced Member
  
Join Date: Apr 2007
Posts: 61
 

Default Re: 4 Level SEO friendly Flyout Menus

Yes, in 4.1.7 in doesn't work in a proper way.
__________________
X-card Gold 4.1.7
Batch Order Mod/Order Processing
Detailed Order Management Mod
Order Audit/Profit reports
Advanced Product Search
Ajax Username Checker
Direct Product Enquiry Form
FAQ Manager
Social Bookmarking
Tabs Mod v3
MagneticOne.com All-IN-ONE X-Cart Export
Show Referrer Information on Order Details Page
www.medsmarket.net
Reply With Quote
  #6  
Old 07-13-2007, 12:59 PM
 
nevets1219 nevets1219 is offline
 

eXpert
  
Join Date: Jun 2006
Posts: 351
 

Default 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>
__________________
4.1.8
Reply With Quote
  #7  
Old 07-15-2007, 06:49 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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?
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #8  
Old 07-15-2007, 06:54 AM
  Jayk's Avatar 
Jayk Jayk is offline
 

eXpert
  
Join Date: Nov 2003
Location: Calgary, Alberta, Canada
Posts: 333
 

Default Re: 4 Level SEO friendly Flyout Menus

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

Jason
__________________
X-Cart Gold 4.4.3
Blog: www.flashinthepan.ca
Reply With Quote
  #9  
Old 07-15-2007, 08:37 PM
  1CNS's Avatar 
1CNS 1CNS is offline
 

Advanced Member
  
Join Date: Mar 2004
Location: Los Angeles, CA, USA
Posts: 45
 

Default 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.
__________________
www.funkymart.com
x-cart 4.2.1 [linux]
Reply With Quote
  #10  
Old 07-16-2007, 02:36 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default 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
__________________
xcartmods.co.uk
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 09:14 AM.

   

 
X-Cart forums © 2001-2020