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.