Flyout Menu

[mg3ddesign]

I would like to change the accordion menu on one of my sites www.indoorxtreme.co.uk to the flyout menu due to the number of sub categories I have and the accordion menu not closing.

Would anyone like to talk me through the process?

I have looked at the js and tried changing it but it does not seem to want to work. If anyone has already made this change I would be very grateful.

Thanks

[Dirty Butter]

You'll probably get what you want quicker by requesting paid help on the third party forum.

[Guest Viola]

This has been asked a few times, so here's my code for it. This is for a 220px wide menu, but I'm sure you can figure out where to adjust that. Should be enough to get people started. You'll need to add your own styles to it.

/skins/[skin_name]/templates/box.navigation.php

have your links in a <ul> with a class of "slider" (or whatever class name you want, just keep it consistent)

<ul class="slider">

{$NAVIGATION_TREE}

{if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if}

{if $CTRL_SALE}

<li><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

</ul>

/skins/[skin_name]/styles/common.css

ul.slider a{

display: block;

padding:5px 20px;

background: #fff;

/* normal link style */

}

ul.slider a:hover{

/* style on hover */

}

ul.slider a.hover{

/* style for parents of currently hovered link */

}

ul.slider,

ul.slider ul{

margin:0;

padding:0;

list-style:none;

}

ul.slider li{

position:relative;

display:block;

width:219px;

line-height:20px;

padding:0;

}

ul.slider li ul{

display:block;

position:absolute;

top:0px;

left:219px;

width:0px;

z-index:50;

overflow:hidden;

}

ul.slider li:hover > ul{

/* css fallback */

width:220px;

overflow:visible;

}

/skins/[skin_name]/js/script.js

$('.slider li').hover(

function(){

$(this).find('ul:first').stop().css({width: '1px'}).animate({ width: '220px'}, 400);

$(this).find('a:first').addClass('hover');

},

function(){

$(this).find('ul:first').stop().animate({ width: '0px'}, 400);

$(this).find('a:first').removeClass('hover');

}

);

[mg3ddesign]

I will try that tonight.

Extremelly helpful Viola as I have been trying to figure this out for ages..

[mg3ddesign]

Tried it and it works like a charm. I have been trying to sort this for months. I'm very thankful and sure that this script will help a lot of people.

[mg3ddesign]

Me again, is there a way to stop the fly out menu from crashing when you are on a product page and the menu goes over the product. At the moment when your pointer follows the menu as soon as it goes over the product the menu goes and the product magnification comes on. What I have been looking at doing is making it so that the menu is a higher priority than the magnification but so far can not find the correct code.

eg - http://indoorxtreme.co.uk/shop/key-rings-gifts/blitz-martial-art-ju-jitsu-figure-mug.html

Any help would be much appreciated.

Thanks

[Guest Viola]

Try adding "z-index:12000;" to "ul.slider li" in your CSS.

[Toucan Web Design]

Depending on what versions of IE you support on your site, you may also need to have a lot more z-indexes setup for it to calculate them properly.

The other problem with setting the z-indexes in that way, is that the magnification window will then hide behind the menu.

What we did is to set a z-index on the menu of say, 300, then opened up the js/styles/jquery.magnifier.css, changed the #dio-sensor to be z-index 100, then on the js/plugins/jquery.magnifier.js file, we found:

				    handleMouseMove:function(e)

				    {

And changed it to:

				    handleMouseMove:function(e)

				    {

                        magnifier.$sensor.css("z-index", "11000");

That did the trick and solved any of the overlaying issues

[mg3ddesign]

Hi Toucan

I tried what you said as I liked the fact that it work in more browsers easier. Unfortunately it only seems to work to start. If you go onto a product it works. If on that product you use the magnifier tool and then go onto the menu it has the same problem. Its like the magnifier has been activated so that becomes the dominant layer.

Let me know your thoughts?

Thanks for the help

[mg3ddesign]

All seems to be working fine now, I put 12000 in as Viola said and that is now all working. Thanks so much

[Toucan Web Design]

Ah, apologies, I'd missed a step

				    handleMouseOut: function(e)

				    {

Just change that to:

				    handleMouseOut: function(e)

				    {

	  magnifier.$sensor.css("z-index", "100");

[Guest Weizhi]

This works great thanks.

[Guest acschnabel]

I must be missing something here, because my flyout isn't coming up. Anyone have some thoughts or suggestions?

box.navigation.php

<div>

  <h3>{$LANG.navigation.title}</h3>

  <ul class="slider">

{$NAVIGATION_TREE}

{if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>

{/if}

{if $CTRL_SALE}

<li><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>

{/if}

  </ul>

</div>

common.css

ul.slider a{

display: block;

padding:5px 5px;

/* normal link style */

}

ul.slider a:hover{

/* style on hover */

}

ul.slider a.hover{

/* style for parents of currently hovered link */

}

ul.slider,

ul.slider ul{

margin:0;

padding:0;

list-style:none;

border-left: 2px solid #999966;

border-right: 2px solid #999966;

border-bottom: 2px solid #999966;

background-color: #cccc99;

}

ul.slider li{

position:relative;

display:block;

width:175px;

line-height:12px;

padding:0;

}

ul.slider li ul{

display:block;

position:absolute;

top:0px;

left:175px;

width:0px;

z-index:1000;

/* overflow:hidden;*/

}

ul.slider li:hover > ul{

/* css fallback */

width:220px;

overflow:visible;

}

script.js

// Added Javascript for menu slider

$('.slider li').hover(

function(){

$(this).find('ul:first').stop().css({width: '1px'}).animate({ width: '220px'}, 400);

$(this).find('a:first').addClass('hover');

},

function(){

$(this).find('ul:first').stop().animate({ width: '0px'}, 400);

$(this).find('a:first').removeClass('hover');

}

);

Thanks in advance.

Tony.

[Guest acschnabel]

Fixed. Did not have the Expand Category Tree turned on in the Layout section. Thanks VIOLA...

Tony.

[mg3ddesign]

This is working fantastic for me.

I would like to add an arrow graphic next to the category names that have sub categories, the same as the standard V5 version. Does anyone know if that is possible with this flyout menu.

Many thanks

Marco