X-Cart: shopping cart software

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 - 4.1.x compatible (https://forum.x-cart.com/showthread.php?t=32668)

intel352 07-19-2007 03:58 AM

4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Credit for this mod goes to Alltribes, as he posted the original code in this thread:
X-Cart 4.0.x flyout menus

The code is cleaned up a bit, with an additional change to make it show all levels under 4.1.x (the original code, due to how 4.1.x operates, only displayed the categories at your current viewing level)

-----------------

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.

The following code has had it's logic changed slightly from the original, to remove any redundant code & logic statements
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 and $categories[l1_cat_num].categoryid}
                <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}+{/if}</a>
                {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}+{/if}</a>
                                                {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}+{/if}</a>
                                                                        {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>
                                                                        {/if}
                                                                        </li>
                                                                {/if}
                                                        {/section}
                                                        </ul>
                                                {/if}
                                        </li>
                                {/if}
                        {/section}
                        </ul>
                {/if}
                </li>
        {/if}
{/section}
</ul>


Please note, the css styling below is styled specifically for alltribes.com, the creator of this mod. You'll need to change the styling to match your site
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 make sure this exists at 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">

For 4.1.x compatibility, open /home.php.
Find:
Code:

define('OFFERS_DONT_SHOW_NEW',1);
require "./auth.php";


After, add:
Code:

/* Makes fly-out menus show all levels properly */
define("GET_ALL_CATEGORIES", true);



Cheers

nevets1219 07-23-2007 12:35 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I've followed all the steps but so far all I see in the source is just
Code:

<ul id="navmenu">
</ul>


I've cleared the cache too.

I suggest the following:
Change
Code:

<link rel="stylesheet" href="{$SkinDir}/menu/menu.css">
to
Code:

<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" />
Just added the bolded part.

I'll continue playing around with the code to see what went wrong but if you have any insight please let me know.

EDIT:
I don't see the absolute need for the bolded part because every category should have a categoryid (which is what I'm assuming you are checking for). However, I would recommend a check to see if that category is available (underlined)
Code:

{if $categories[level_one_cat_num].parentid eq 0 and $categories[level_one_cat_num].categoryid and $categories[level_one_cat_num].avail eq "Y"}

SECOND EDIT:
Well, instead of using section, I changed it to foreach (along with some corresponding code changes to allow foreach to work) and it works. However, it's a bit inefficient because essentially you are looping over the $allcategories over and over to display anything with a matching parentid. Hopefully, I didn't use the counter wrong, I just incremented it once everytime the loops run. If you have a large amount of categories, it could hurt.
Code:

<ul id="navmenu">
{assign var=counter value=0}
{foreach from=$categories item=level_one_cat name="Root"}
  {assign var=counter value=$counter+1}
  {if $level_one_cat.parentid eq 0 and $level_one_cat.avail eq "Y"}
      <li><a href="home.php?cat={$level_one_cat.categoryid}" alt="{$level_one_cat.category}">{$level_one_cat.category}{if $level_one_cat.subcategory_count gt 0}+{/if}</a>
      {if $level_one_cat.subcategory_count gt 0}
        <ul>
        {foreach from=$allcategories item=level_two_cat name="Level_Two"}
            {assign var=counter value=$counter+1}
            {if $level_two_cat.parentid eq $level_one_cat.categoryid}
              <li><a href="home.php?cat={$level_two_cat.categoryid}" alt="{$level_two_cat.category}">{$level_two_cat.category}{if $level_two_cat.subcategory_count gt 0}+{/if}</a>
              {if $level_two_cat.subcategory_count gt 0}
                  <ul>
                  {foreach from=$allcategories item=level_three_cat name="Level_Three"}
                    {assign var=counter value=$counter+1}
                    {if $level_three_cat.parentid eq $level_two_cat.categoryid}
                        <li><a href="home.php?cat={$level_three_cat.categoryid}" alt="{$level_three_cat.category}">{$level_three_cat.category}{if $level_three_cat.subcategory_count gt 0}+{/if}</a>
                        {if $level_three_cat.subcategory_count gt 0}
                          <ul>
                          {foreach from=$allcategories item=level_four_cat name="Level_Four"}
                              {assign var=counter value=$counter+1}
                              {if $level_four_cat.parentid eq $level_three_cat.categoryid}
                                <li><a href="home.php?cat={$level_four_cat.categoryid}" alt="{$level_four_cat.category}">{$level_four_cat.category}</a></li>
                              {/if}
                          {/foreach}
                          </ul>
                        {/if}
                        </li>
                    {/if}
                  {/foreach}
              </ul>
              {/if}
              </li>
            {/if}
        {/foreach}
        </ul>
      {/if}
      </li>
  {/if}
{/foreach}
</ul>
COUNTER = {$counter}<br />

For me counter was 673 using this method.

Comparing with the other method I posted in the other thread (I'm still trying to figure out how and why it works because I can't seem to merge it with yours though they are almost identical)
Code:

<ul id="navmenu">
{assign var=counter value=0}
{foreach from=$categories item=level_one_cat name="Root"}
  {assign var=counter value=$counter+1}
  {assign var=one value=$level_one_cat.categoryid}
  {if $allsubcategories.$one ne ''}     
      {/if}
      <li><a href="home.php?cat={$level_one_cat.categoryid}"><b>»</b>{$level_one_cat.category|escape:'html'}</a>
  {else}
      <li><a href="home.php?cat={$level_one_cat.categoryid}">{$level_one_cat.category|escape:'html'}</a></li>
  {/if}       
  {if $allsubcategories.$one ne ''}
      <ul>
      {foreach from=$allsubcategories.$one item=level_two_cat name="Level Two"}
        {assign var=counter value=$counter+1}
        {assign var=two value=$level_two_cat.categoryid}
        {if $allsubcategories.$two ne ''}
            <li><a href="home.php?cat={$level_two_cat.categoryid}"><b>»</b>{$level_two_cat.category|escape:'html'}</a>
        {else}
            <li><a href="home.php?cat={$level_two_cat.categoryid}">{$level_two_cat.category|escape:'html'}</a></li>
        {/if}           
        {if $allsubcategories.$two ne ''}
            <ul>
            {foreach from=$allsubcategories.$two item=level_three_cat name="Level Three"}
              {assign var=counter value=$counter+1}
              <li><a href="home.php?cat={$level_three_cat.categoryid}">{$level_three_cat.category|escape:'html'}</a></li>
            {/foreach}
            </ul>
        {/if}
        {if $allsubcategories.$two ne ''}
            </li>
        {/if}
      {/foreach}
      </ul>
  {/if}
  {if $allsubcategories.$one ne ''}
      </li>
  {/if}
{/foreach}
</ul>
COUNTER = {$counter}<br />

Counter in this case was only 60.

We can ignore the fact that yours run to the 4th level and the other method only runs to the 3rd level because you have
Code:

{if $xxxx.subcategory_count gt 0}
So I don't believe that is the offset.

To give you an idea of how our category structure works:
13 Root Categories.
3 Levels Deep.
47 Subcategories (basically level 2 and level 3 combined).

Will you try both ways to see if you notice any difference? You should be able to just use it directly in menu.tpl.

nevets1219 07-24-2007 02:27 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
A CSS recommendation:

Add the following to your menu.css (adjust as necessary)
Code:

#floatingBold {
  float: right;
  margin-right: 5px;
}


Then instead of just using the '+', you would do
Code:

<b id="floatingBold">+</b>
It'll look very neat this way. However, you'll probably have to move the block of code to the beginning after <li> inside the <a>

One thing I have to note is that the CSS is very well done and nicely documented!

EDIT:
Well, I figured out the difference between both versions. I overlooked one very tiny difference.

You were using $allcategories for sublevels. The other method was using $allsubcategories. $allsubcategories is basically an array that lists each categories' subcategories which means X-Cart has already done the work somewhere and we shouldn't do it again (by traversing through all of $allcategories). Here are some actual numbers to let you see the efficiency of both methods.

Using $allcategories and using the Smarty debug info, we have the following for menu/menu.tpl:
Code:

0.06226
0.01211
0.01254


Using $allsubcategories and using the Smarty debug info, we have the following for menu/menu.tpl:
Code:

0.05024
0.00475
0.00439

0.006 to 0.01 difference (refer to the above post to get an idea of how our categories are structured). I would highly recommend that you switch to this method if you can sacrifice some memory space (you have to store the categoryid of each level temporary, I don't believe you can just do $allsubcategories.$level_one_cat.categoryid (or at least when I did it, it gave me some errors).


Here's what it finally looks like
Code:

{assign var=subcatSymbol value='<b id="floatingBold">+</b>'}
<ul id="navmenu">
{foreach from=$categories item=level_one name="Root"}
  {assign var=one value=$level_one.categoryid}
  {if $level_one.parentid eq 0 and $level_one.avail eq "Y"}
      <li><a href="home.php?cat={$level_one.categoryid}">{if $level_one.subcategory_count gt 0}{$subcatSymbol}{/if}{$level_one.category|escape:'html'}</a>
      {if $level_one.subcategory_count gt 0}
        <ul>
        {foreach from=$allsubcategories.$one item=level_two name="Level_Two"}
            {assign var=two value=$level_two.categoryid}
            {if $level_two.avail eq "Y"}
              <li><a href="home.php?cat={$level_two.categoryid}">{if $allsubcategories.$two ne ''}{$subcatSymbol}{/if}{$level_two.category|escape:'html'}</a>
              {if $allsubcategories.$two ne ''}
                  <ul>
                  {foreach from=$allsubcategories.$two item=level_three name="Level_Three"}
                    {assign var=three value=$level_three.categoryid}
                    {if $level_three.avail eq "Y"}
                        <li><a href="home.php?cat={$level_three.categoryid}">{if $allsubcategories.$three ne ''}{$subcatSymbol}{/if}{$level_three.category|escape:'html'}</a>
                        {if $allsubcategories.$three ne ''}
                          <ul>
                          {foreach from=$allsubcategories.$three item=level_four name="Level_Four"}
                              {if $level_four.avail eq "Y"}
                                <li><a href="home.php?cat={$level_four.categoryid}">{$level_four.category|escape:'html'}</a></li>
                              {/if}
                          {/foreach}
                          </ul>
                        {/if}
                        </li>
                    {/if}
                  {/foreach}
              </ul>
              {/if}
              </li>
            {/if}
        {/foreach}
        </ul>
      {/if}
      </li>
  {/if}
{/foreach}
</ul>

I've decided to use your code with my modification because I believe your HTML is probably done better. I think, it could use a few more adjustments (such as ending the <li> tagger sooner when we know there is no subcategory - you get cleaner HTML code but you have more checks ==OR== we can put it all on one line :P). You'll notice that I've also added
Code:

|escape:'html'
This will allow & be output as &amp; which is cleaner. A few more revisions and I think the core code of this is done for me, all that's left is the CSS portion.

A good future enhancement would be to create a PHP or Smarty page that generates the TPL which will contain pure HTML and no Smarty code. This will be perfect for people who have a large amount of categories and subcategories. They can generate it every once in a while and use a static flyout to improve the performance. It can dynamically generate it each time a category is modified (requires extensive changes, have to find where categories are modified) or there could be a button (which would be better as long as users don't forget to run it when they change categories). Maybe I'll do it in the future.

EDIT: Code update (7/25/2007). Removed "alt" tags since they are "proprietary to Netscape or Internet Explorer". Added the checks to see if the category is available. I'm going to ignore user's personal order for the time being. Put the symbol into a variable to allow easy modification for the future - it's a constant afterall :P

DogByteMan 09-08-2007 10:14 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Without a doubt... No method in this thread seems to work for me on 4.1.8

I can get the floating, bloated, bolded, scattered, covered and smothered + sign. But there is never any flyout categories on mouseover

Did you guys forget a step or something

nevets1219 09-08-2007 11:08 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Are you sure you followed all the instructions? Did you try clearing your cache (both browser's and Smarty's)?

DogByteMan 09-08-2007 11:43 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Now I didn't clear my browser cache, but I did clear templates C

Every change I would make to code or css would appear on the page fine.... There just isn't any flyout category lists

DogByteMan 09-09-2007 05:38 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
I cleared everything but the server and the kitchen sink but still no luck... Here is what I have done

I created a folder within skin1 called menu

In skin1/menu I added the following files

I created a file named menu.tpl and placed the following code into it:
Code:

{assign var=subcatSymbol value='<b id="floatingBold">+</b>'}
<ul id="navmenu">
{foreach from=$categories item=level_one name="Root"}
  {assign var=one value=$level_one.categoryid}
  {if $level_one.parentid eq 0 and $level_one.avail eq "Y"}
      <li><a href="home.php?cat={$level_one.categoryid}">{if $level_one.subcategory_count gt 0}{$subcatSymbol}{/if}{$level_one.category|escape:'html'}</a>
      {if $level_one.subcategory_count gt 0}
        <ul>
        {foreach from=$allsubcategories.$one item=level_two name="Level_Two"}
            {assign var=two value=$level_two.categoryid}
            {if $level_two.avail eq "Y"}
              <li><a href="home.php?cat={$level_two.categoryid}">{if $allsubcategories.$two ne ''}{$subcatSymbol}{/if}{$level_two.category|escape:'html'}</a>
              {if $allsubcategories.$two ne ''}
                  <ul>
                  {foreach from=$allsubcategories.$two item=level_three name="Level_Three"}
                    {assign var=three value=$level_three.categoryid}
                    {if $level_three.avail eq "Y"}
                        <li><a href="home.php?cat={$level_three.categoryid}">{if $allsubcategories.$three ne ''}{$subcatSymbol}{/if}{$level_three.category|escape:'html'}</a>
                        {if $allsubcategories.$three ne ''}
                          <ul>
                          {foreach from=$allsubcategories.$three item=level_four name="Level_Four"}
                              {if $level_four.avail eq "Y"}
                                <li><a href="home.php?cat={$level_four.categoryid}">{$level_four.category|escape:'html'}</a></li>
                              {/if}
                          {/foreach}
                          </ul>
                        {/if}
                        </li>
                    {/if}
                  {/foreach}
              </ul>
              {/if}
              </li>
            {/if}
        {/foreach}
        </ul>
      {/if}
      </li>
  {/if}
{/foreach}
</ul>


I created a file named menu.css and placed the following code into it:
(I think alltribes site is cool, so no slight to him, but I changed this)
Code:

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0px none;
  padding: 0;
  width: 148px; /*For KHTML*/
  list-style-type: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: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 0px;
  display: block;
  background: #EEE;
  color: #000;
  font-size: 10px;
  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: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
  color: #000;
}

/* 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: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #000;
}

/* 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: #CCC;
  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: #EEE;
  color: #000;
}

/* 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: #CCC;
  color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* 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;
}

#floatingBold {
  float: right;
  margin-right: 2px;
}

Note at the bottom the added #floatingBold css

I created a file named menu.js and placed the following code into it:
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);


Just before </head> in customer/home.tpl I placed this code:
Code:

<link rel="stylesheet" href="{$SkinDir}/menu/menu.css" type="text/css" />
<!--[if gte IE 5.5]>
<script language="JavaScript" src="{$SkinDir}/menu/menu.js" type="text/JavaScript"></script>
<![endif]-->


And I replaced also in customer/home.tpl:
Code:

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

With:
Code:

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

I also made sure the following exists at the top of /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">

In /home.php I made the following changes:

Find:
Code:

define('OFFERS_DONT_SHOW_NEW',1);
require "./auth.php";


After, add:
Code:

/* Makes fly-out menus show all levels properly */
define("GET_ALL_CATEGORIES", true);


OK... now you have it. Where did I go wrong?

DogByteMan 09-09-2007 08:19 AM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
A snippet of my page source... Note the absence of level 2+

Code:

<tr><td><ul id="navmenu">
            <li><a href="home.php?cat=506">Clearance</a>
            </li>
              <li><a href="home.php?cat=594"><b id="floatingBold">></b>Computer Components</a>
              <ul>
                  </ul>
            </li>
              <li><a href="home.php?cat=438"><b id="floatingBold">></b>Alarm Clocks</a>
              <ul>
                  </ul>
            </li>
              <li><a href="home.php?cat=445"><b id="floatingBold">></b>Audio / Video</a>
              <ul>
                  </ul>
            </li>
              <li><a href="home.php?cat=426"><b id="floatingBold">></b>Cameras</a>
              <ul>
                  </ul>
            </li>
  </ul>


I have done and redone the methods in this thread.... The best I can get is a goodlooking css menu that does not work any better than what was there

DogByteMan 09-09-2007 07:46 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
OK I tried this entire thread again from scratch just to make sure I'm not nuts.

If I use the code in intel352's post (post #1 of this thread). I don't even get a menu to show at all. At least with nevets1219's code I get a dang good looking category menu. But alas, there are still no flyout subcats to be seen. My source is still as it was in my earlier post.

Maybe nevets1219 will look at the code I posted and find an obvious error when he signs on next.

DogByteMan 09-11-2007 12:05 PM

Re: 4 Level SEO friendly Flyout Menus - 4.1.x compatible
 
Since I can't get an answer back on this one.... Does anyone know which is the best pay for solution for 250+ categories? Is it the new X-Cart fancycats 4.1.x version?


All times are GMT -8. The time now is 11:01 AM.

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