Any changes for the superfish menu script recently?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
6/1/2010 6:58:12 PM
Wei Li
Gravatar
Total Posts 125
View Posts

Any changes for the superfish menu script recently?

Since I updated to the newer version from the resource, the superfish menu cannot be displayed properly. I am sure I haven't changed any style but there are some extra css when I checked with the firebug.

<ul class="sf-menu sf-navbar static sf-js-enabled sf-shadow" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">

Where are these style definition from? It definitely not in my css skin file.
Thank you for help.

 

6/2/2010 9:05:42 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Any changes for the superfish menu script recently?

Hi Wei Li,

That happens under .NET 4 because it now adds this javascript which sets some styles on the menu, if you view the source of your page you will see something like this near the bottom:

Sys.WebForms.Menu({ element: 'ctl00_SiteMenu1_ctl00', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });

I was able to fix menu display issues in included skins in the repository including the Mitchinson-earthy skins which use Superfish. I had to add different things to different skins to solve different issues, but what I had to add to stylemenu.css for mitchinsone-earthy was:

li.dynamic { position:static !important; visibility: visible !important; }

for others it was different settings to adjust bt always I had to use the !important to make my setting trump the hard coded settings that the javascript was adding.

There is also another way to fix it easily and that is in Web.config by changing the rendering compatibility to 3.5 instead of 4.0 in the controlRenderingCompatibilityVersion attribute.

<pages validateRequest="false" enableViewStateMac="false" viewStateEncryptionMode="Auto" maxPageStateFieldLength="100" controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">

However, this affects more than just menus and defeats some of the value of using .NET 4, so it is much better if you can find a CSS solution and keep the rendering as 4.0

Hope it helps,

Joe

6/2/2010 6:25:40 PM
Wei Li
Gravatar
Total Posts 125
View Posts

Re: Any changes for the superfish menu script recently?

Thank you for the reply.

I was able to solve this by adding !important to the

.sf-menu {
line-height: 1.0;
width:100%!important;}

Also the

li.dynamic { position:static !important; visibility: visible !important; }

as you said, otherwise there is no "flying out" effect.

9/6/2010 10:08:23 PM
BitterBitter
Gravatar
Total Posts 1
View Posts

Re: Any changes for the superfish menu script recently?

I am using .net 4 too, and I have tried to add

.sf-menu {
line-height: 1.0;
width:100%!important;}

and

li.dynamic { position:static !important; visibility: visible !important; }

 

in stylemenu.css but looks like I still miss out the flying out (animation) effect.

And even I comment out the following line in mojosuperfish.js, the menu still works.

//            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });

Did I miss out something here? Thanks.

9/7/2010 6:56:46 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Any changes for the superfish menu script recently?

Make sure you understand about CSS caching

http://www.mojoportal.com/skinning-overview.aspx

with caching enabled you will not immediately see your changes to CSS reflected in the page without clearing the server cache and the browser cache

9/10/2010 11:29:02 AM
benedict
Gravatar
Total Posts 1
View Posts

Re: Any changes for the superfish menu script recently?

Hi Joe,

I believe only changing CSS is not enough as

Sys.WebForms.Menu({ element: 'ctl00_SiteMenu1_ctl00', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });

will add javascript mouseover, mouseout events to the MenuItems and superfish's animation will not work as usual.

To only disable the events, you can set Asp.Net's Menu's Enabled = false

 

I have answered a somewhat related question in stackoverflow:

http://stackoverflow.com/questions/3425498/disable-javascript-generation-by-asp-net-menu-control/3673565#3673565

 

Best regards

Benedict

9/12/2010 7:41:57 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Any changes for the superfish menu script recently?

Hi Benedict,

Thanks! You are right, I had not noticed that the superfish animation was not working.

Based on your findings I have fixed it in the source code repository like this:

public class mojoMenuSuperfish : Menu
    {
        protected override void OnLoad(EventArgs e)
        {
            //this is needed under .NET 4 because the menu javscript otherwise adds events for mouseover that interfere with the superfish mouseover transitions
#if !NET35
            this.Enabled = false;
#endif
            base.OnLoad(e);

        }
}

so it will be fixed in the next release.

Best,

Joe 

You must sign in to post in the forums. This thread is closed to new posts.