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

4 levels css flyout menu
 
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features
 
Thread Tools Search this Thread
  #1  
Old 08-26-2006, 07:19 AM
 
MallRomania MallRomania is offline
 

Senior Member
  
Join Date: Apr 2006
Posts: 109
 

Exclamation 4 levels css flyout menu

Hello

Below you will find a small flyout menu with 4 levels using css. I know there are already some ideas on this forum or you can buy from xcartmods but this is an exercise for me and if you like, for you also.

The original (static) menu can be found here: http://www.cssplay.co.uk/menus/flyout2.html. Also, this menu include info from this post, thanks to the author: http://forum.x-cart.com/viewtopic.php?t=14905



Modifications (30.08.2006):
1. Moved all files for menu into a folder called meniu
2. Added css browser detection into css file
3. Remove stylesheet from meniu.tpl and add this to home.tpl

Step 0: create one folder called meniu

Step1: create meniu.css in skin1/meniu dir and add this code

Code:
/* Original from www.cssplay.co.uk*/ .menu { position:relative; z-index:1000; font-size:90%; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; width:150px; } /* hack for IE5.5 */ * html .menu ul {margin-left:0px; ma\rgin-left:0;} /* position relative so that you can position the sub levels */ .menu li { position:relative; } /* get rid of the table */ table {position:relative; top:0; left:0; z-index:10; font-size:1em;} /* style the links */ .menu a, .menu a:visited { display:block; text-decoration:none; height:30px; line-height:30px; width:149px; color:#000; background:#ffffff; text-indent:2px; border:1px solid #336699; border-width:0 1px 1px 0; text-align:left } /* hack for IE5.5 */ * html .menu a, * html .menu a:visited {width:150px; w\idth:149px;} /* style the link hover */ .menu a:hover{ color:#fff; background:#336699; } /* hide the sub levels and give them a positon absolute so that they take up no room */ /*get different menu styles for each browser */ /* following can be use: ie6 - Internet Explorer 6, ie5 - Internet Explorer 5 , .ie .mac Internet Explorer on Mac OS, konqueror - Konqueror, webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira */ .ie .menu ul ul { visibility:hidden; position:absolute; top:-30px; left:150px; width:170px; font-size:90%; } .gecko .menu ul ul { /*Mozilla, Firefox, Camino, Netscape */ visibility:hidden; position:absolute; top:0px; left:150px; width:170px; font-size:90%; } .opera .menu ul ul { visibility:hidden; position:absolute; top:-30px; left:150px; width:170px; font-size:90%; } /* make the second level visible when hover on first level list OR link */ .menu ul :hover ul{ visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{ visibility:hidden; } /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{ visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible; } /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul { visibility:visible; }


Step 2: create file meniu.tpl and ad this into your skin1/meniu directory:

Code:
<div class="menu"> <table><tr><td> <ul> {*** level 1***} {section name=l1_cat_num loop=$allcategories} {if $allcategories[l1_cat_num].parentid eq 0} <li><a href="home.php?cat={$allcategories[l1_cat_num].categoryid}" alt="{$allcategories[l1_cat_num].category}">{$allcategories[l1_cat_num].category} {*** count products***} {if $allcategories[l1_cat_num].product_count gt 0} ({$allcategories[l1_cat_num].product_count}) {/if} {if $allcategories[l1_cat_num].subcategory_count gt 0} » {/if} <!--[if IE 7]><!--></a><!--<![endif]--> {if $allcategories[l1_cat_num].subcategory_count gt 0} {*** check if root cat has child cats ***} {*** end level 1***} <table><tr><td> {*** level 2***} <ul> {section name=l2_cat_num loop=$allcategories} {if $allcategories[l2_cat_num].parentid eq $allcategories[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} {*** count products***} {if $allcategories[l2_cat_num].product_count gt 0} ({$allcategories[l2_cat_num].product_count}) {/if} {if $allcategories[l2_cat_num].subcategory_count gt 0} »{/if}<!--[if IE 7]><!--></a><!--<![endif]--> {if $allcategories[l2_cat_num].subcategory_count gt 0} {*** check if parent has child cats***} {*** end level 2***} <table><tr><td> {*** level 3***} <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} {*** count products***} {if $allcategories[l3_cat_num].product_count gt 0} ({$allcategories[l3_cat_num].product_count}) {/if}{if $allcategories[l3_cat_num].subcategory_count gt 0} »{/if}<!--[if IE 7]><!--></a><!--<![endif]--> {if $allcategories[l3_cat_num].subcategory_count gt 0} {*** check if parent has child cats***} {*** end level 3***} <table><tr><td> {*** level 4***} <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} {*** count products***} {if $allcategories[l4_cat_num].product_count gt 0} ({$allcategories[l4_cat_num].product_count}) {/if}<!--[if IE 7]><!--></a><!--<![endif]--> {/if}{/section} </li> </ul> {*** end level 4***} </td></tr></table> <!--[if lte IE 6]></a><![endif]--> {/if}{/if}{/section}</li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> {/if}{/if}{/section}</li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> {/if}{/if}{/section}</li> </ul> </td></tr></table> </div>


Step 3: create file css_browser_selector.js into your skin1/meniu and add this code from below:

Code:
// CSS Browser Selector v0.2.3 // Documentation: http://rafael.adm.br/css_browser_selector // License: http://creativecommons.org/licenses/by/2.5/ // Author: Rafael Lima (http://rafael.adm.br) // Contributors: http://rafael.adm.br/css_browser_selector#contributors var css_browser_selector = function() { var ua = navigator.userAgent.toLowerCase(), is = function(t){ return ua.indexOf(t) != -1; }, h = document.getElementsByTagName('html')[0], b = (!(/opera|webtv/i.test(ua)) && /msie (\d)/.test(ua)) ? ((is('mac') ? 'ieMac ' : '') + 'ie ie' + RegExp.$1) : is('gecko/') ? 'gecko' : is('opera') ? 'opera' : is('konqueror') ? 'konqueror' : is('applewebkit/') ? 'webkit safari' : is('mozilla/') ? 'gecko' : '', os = (is('x11') || is('linux')) ? ' linux' : is('mac') ? ' mac' : is('win') ? ' win' : ''; var c = b+os+' js'; h.className += h.className?' '+c:c; }();

Step 4: add this into your skin1/customer/home.tpl file

1. On line 1 add this:

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

2. before </head> add

Code:
<script src="{$SkinDir}/meniu/css_browser_selector.js" type="text/javascript"></script> <LINK rel="stylesheet" href="{$SkinDir}/meniu/meniu.css">

3. Replace { include file="customer/categories.tpl" } with {include file="meniu/meniu.tpl"} or made this modification to your code:

Code:
{if $categories ne "" and ($active_modules.Fancy_Categories ne "" or $config.General.root_categories eq "Y" or $subcategories ne "")} {include file="meniu/meniu.tpl"} {else} { include file="customer/categories.tpl" }



I hope most of problems are solved, but you still have to test it first local.

This menu is tested on fresh installation of x-cart 4.0.18; using other templates (as i do) might require modifications to meniu.css.

Problems (please let me know if it's true):

1. in Opera 9 i cannot click on categories submenus.
2. blank spaces between categories if subcategories are available.
__________________
Mircea Teleleu
Shopedia.ro-la cumparaturi
www.shopedia.ro
______________________
x-cart gold 4.1.6
Linux

Last edited by MallRomania : 09-05-2006 at 11:14 PM. Reason: Please test it on your localhost, see if it's look ok
Reply With Quote
  #2  
Old 09-04-2006, 11:52 AM
 
MallRomania MallRomania is offline
 

Senior Member
  
Join Date: Apr 2006
Posts: 109
 

Default Re: 4 levels css flyout menu

Ok, can anybody use this menu on different template than original one? I have serious problem using into my live site, i have to remove it. My problem it's because of IE6, it's hidding subcategories or better say, show only first subcategory of each category. In FF and Opera all subcategories are visible.

I belive the main problem it's because i use a table inside a div. If i remove first table it's look great in Opera and Firefox, but all menu dissapear in IE. Any suggestion?
__________________
Mircea Teleleu
Shopedia.ro-la cumparaturi
www.shopedia.ro
______________________
x-cart gold 4.1.6
Linux
Reply With Quote
  #3  
Old 09-25-2006, 06:22 PM
 
Scott DeToffol Scott DeToffol is offline
 

Senior Member
  
Join Date: Apr 2005
Location: Minneapolis, MN
Posts: 174
 

Default Re: 4 levels css flyout menu

Pretty cool, but it doesn't work in IE 6 or IE 7. Looks good in Firefox 1.5.0.7
__________________
Scott DeToffol
Online Marketing and E-Commerce Consulting in Minneapolis

X-Cart Gold Version 4.1.9 for www.sundogtrading.com
X-Cart Pro Version 4.2.3 for www.heavyglare.com
Reply With Quote
  #4  
Old 10-08-2006, 03:04 PM
  2coolbaby's Avatar 
2coolbaby 2coolbaby is offline
 

eXpert
  
Join Date: Sep 2004
Location: TN moving to FL
Posts: 265
 

Default Re: 4 levels css flyout menu

I bought this menu from a guy in the uk & it won't work in IE. That was a wasted $30. I sure would appreciate it if someone finds a cure for this.
__________________
Mary Lee
-------------------
Dinner and a Murder Mystery Games
http://www.dinnerandamurder.com

x-cart version 4.7.5 / Mac OS 10.10.5 and Windows 8/10 sometimes - Ideal Responsive Template
Reply With Quote
  #5  
Old 10-08-2006, 03:37 PM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default Re: 4 levels css flyout menu

If you are referring to PhilJ's menu, it does work fine in IE.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #6  
Old 10-08-2006, 03:39 PM
  2coolbaby's Avatar 
2coolbaby 2coolbaby is offline
 

eXpert
  
Join Date: Sep 2004
Location: TN moving to FL
Posts: 265
 

Default Re: 4 levels css flyout menu

That is the one, but it doesn't work for me. I have a 7_Dana template so that is most likely the reason, but I have no clue what it would take to fix it.
__________________
Mary Lee
-------------------
Dinner and a Murder Mystery Games
http://www.dinnerandamurder.com

x-cart version 4.7.5 / Mac OS 10.10.5 and Windows 8/10 sometimes - Ideal Responsive Template
Reply With Quote
  #7  
Old 10-08-2006, 04:00 PM
  PhilJ's Avatar 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Location: UK
Posts: 3,647
 

Default Re: 4 levels css flyout menu

Mary, I'll try and sort it for you, please get in touch.
Reply With Quote
  #8  
Old 02-22-2007, 01:13 PM
 
Wambli Wambli is offline
 

Advanced Member
  
Join Date: Sep 2005
Posts: 52
 

Default Re: 4 levels css flyout menu

Has anyone gotton this code to work on windows I would sure love to use it but it will not work for me
__________________
Christmas
x-cart 4.1.6
Reply With Quote
  #9  
Old 05-05-2008, 11:39 AM
 
OceanRiver OceanRiver is offline
 

Newbie
  
Join Date: Jul 2007
Posts: 6
 

Default Re: 4 levels css flyout menu

I have this menu running on a store I take care of,
http://store.oceanriver.com/store/

Everythings been fine, except I just realized the display is now way off in ie6. It's expanding the left menu width and pushing the main frame to below everything. It works fine in every other browser, and I'm pretty its a css quirk of ie6, but I can't figure what. Any suggestions?

Thanks,
Graham
__________________
www.oceanriver.com
Version 4.1.11
Reply With Quote
  #10  
Old 05-08-2008, 09:11 PM
 
glsp glsp is offline
 

Member
  
Join Date: Dec 2007
Location: Northampton, MA
Posts: 27
 

Unhappy Re: 4 levels css flyout menu

New categories will not appear as I create them. Yes, they're enabled. It does not matter what level they are at, but as it happens, one is a top-level ("Level One") and the other is a second-level ("Level Two"). If I create another category somewhere, at any level ("Test 1"), Level One will appear. When I create yet another category ("Test 2"), Level Two appears. This is where the trend ends, however, as the addition of more categories does not get Test 1 and Test 2 to appear, whether or not they have products.

All of these categories do appear in the main body of the page in the subcategories list (customer/main/subcategories.tpl).
Code:
<ul id="navmenu"> {section name=l1_cat_num loop=$categories} {if $categories[l1_cat_num].parentid eq 0 and $categories[l1_cat_num].avail eq "Y"} <li><a class="sitefont" href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}</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}</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}</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>
I can't imagine what's going on here!

Greg
__________________
X-Cart Gold version 4.1.9

PS: This is what part of the alphabet would look like if Q and R were eliminated.
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features


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 12:33 AM.

   

 
X-Cart forums © 2001-2020