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 levels css flyout menu (https://forum.x-cart.com/showthread.php?t=24388)

MallRomania 08-26-2006 07:19 AM

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.

MallRomania 09-04-2006 11:52 AM

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?

Scott DeToffol 09-25-2006 06:22 PM

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

2coolbaby 10-08-2006 03:04 PM

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.

balinor 10-08-2006 03:37 PM

Re: 4 levels css flyout menu
 
If you are referring to PhilJ's menu, it does work fine in IE.

2coolbaby 10-08-2006 03:39 PM

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.

PhilJ 10-08-2006 04:00 PM

Re: 4 levels css flyout menu
 
Mary, I'll try and sort it for you, please get in touch.

Wambli 02-22-2007 01:13 PM

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

OceanRiver 05-05-2008 11:39 AM

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

glsp 05-08-2008 09:11 PM

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

glsp 05-11-2008 04:05 PM

Re: 4 levels css flyout menu
 
Follow-up:

If I change the loops to {foreach …} and make the appropriate changes to the variable names, it all works out. Can anyone provide insight?

tamicampos 05-18-2008 04:34 PM

Re: 4 levels css flyout menu
 
How would you make this work for a horizontal menu in the head.tpl file?


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

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