skmMenu 2.3 : Consolidated Post IE8, Firefox, Chrome

I have been fixing and updating skmMenu for sometime now. Thought of writing a consolidated post with all the fixes and sourcecode for easy reference. For skmMenu fans and for those who are migrating from 1.1 to 2.0, I have rebuilt the dll on 2.0 framework.

Based on this article by Chris , I have incorporated Javascript changes so that skmMenu works on FireFox, IE and Chrome.

Download skmMenu 2.3 – DLL

Download skmMenu 2.3 Source Code

 The project was checked out from Source Safe. You “may” experience Source Safe binding issues. Please ignore it and remove all the source safe bindings.

Wherever I have made the fix I have marked it as  //GC  with relevant comment next to it. Hope its easy to understand.

The changes are updated in “Readme.txt” file.

 skmMenu Version 2.3 (Bug-Fixes and Changes)

Fixed:
 Recompiled for framework 2.0 and fixed the obselete methods with new methods.
 Change javascript to work with IE 8, Firefox 2,3

Changed: Added <statusbar> to XML element
  Example: <statusbar> </statusbar>

  Added IE 8 (beta 2) support. As IE8 is doesnt like inline styling, two more stylesheet items needed to be added to your stylesheet.

  1. td.skmcur

  Example: td.skmcur{cursor:hand;}

  2. iframe.skm

  Example: iframe.skm {position:absolute;top:0px;left:0px;display:none;}

  Removed the auto generating z-index for submenu. Again IE 8 doesnt like inline styling. Its now done via css class.

Sample Menu Control (.aspx / .ascx)  (replace all [ & ] with < & > respectively)

 [cc1:menu id=”Menu1″ Layout=”Horizontal” HighlightTopMenu=”False” ItemPadding=”0″ ItemSpacing=”1″ runat=”server” SubMenuCssClass=”skmsubmenu”]
 [SelectedMenuItemStyle cssclass=”skmSelMenuItem“][/SelectedMenuItemStyle]
[/cc1:menu]

Sample CSS  

iframe.skm {position:absolute;top:0px;left:0px;display:none;}

td.skmcur{cursor:hand;}

 

.skmsubmenu{ text-align : left; border : solid 1px #FBBD05;color:Black;
background-color:#FFEFC0;cursor:pointer; z-index:auto;
font-family : Verdana; font-size : small; font-weight : bold; width : 175px;line-height:20px;
vertical-align:middle;}

.skmSelMenuItem{background-color: #FBBD05

;} 

 

Screen Shots

 

IE 8

FireFox 3.01

IE 7.0

Google Chrome

Hopefully it works on all browsers from now on. Lets carry it to .net 4.0 too 🙂

30 thoughts on “skmMenu 2.3 : Consolidated Post IE8, Firefox, Chrome

  • November 28, 2008 at 1:39 pm
    Permalink

    Thank you VERY much for that.

    Reply
  • December 16, 2008 at 6:21 am
    Permalink

    Hi,
    i am trying to use your skmMenu version in ordr to get by the security prompt from an SSL site i use…
    The pages without skmMenu works ok, the ones i use the skmMenu on them (in an ascx user control i have the menu) prompts me for the security issue.
    Where can i read more about the SSL “issue” you wrote in the readme file that you have resolved:
    Ex: Fixed SSL “issues” by adding IFrameSrc property to Menu class.
    See:
    http://www.gotdotnet.com/Community/MessageBoard/Thread.aspx?id=188042

    the url for that thread points me to msdn url and i’m stack in there..
    Can you please offer me an url where i can read more about the SSL issue you solved? maybe i understand what i need to do to get rid of that annoyng security message from IE6 (as Firefox and IE7 does not prompt me for it and it works perfect)

    Thank you vry much in advance
    Raul

    Reply
  • January 23, 2009 at 5:08 pm
    Permalink

    I love the fixes you made to skmMenu! Thank you! However, I do have one glitch … in my right-most menu, the submenu titles are long so they are rendered off screen … is there a way it can detect the right border of the browser and flip the submenu creation the other way (going left instead of right)?

    Reply
  • February 18, 2009 at 12:31 am
    Permalink

    Hi

    Your post did helped in resolving the firefox issues, but on IE 8 RC1 the menu shows up with extra spaces, and pull down also is not comming correctly.

    Please help
    ~gaurav

    Reply
  • February 18, 2009 at 7:54 am
    Permalink

    Hi Gaurav

    Did you try creating the mentioned CSS classes in this post ?

    Without these classes it will not function properly in IE8.

    IE8 RC2 is available with more fixes.

    Reply
  • April 10, 2009 at 1:24 pm
    Permalink

    Hi tinboen

    For the fix to work on IE8, you have to use the CSS classeses mentioned on this post. Otherwise they will not work.

    Reply
  • April 19, 2009 at 8:20 pm
    Permalink

    Hi

    I’m using skmMenu in my website. Everything works great. I need to know one more thing, I would like a link in my menu to stay bold after it is clicked, until another link in the menu is clicked, and that would stay bold, so the user can see which link/page is current. Can you please provide with the details on how to do that using skmMenu? Answer will be greatly appreciated.

    Cheers

    Reply
  • May 27, 2009 at 12:28 pm
    Permalink

    Doesn’t seem to be working properly with IE6. Initially there is a large white box at the top of the menu with the menu items pushed down. Upon mousing over the menu items with submenus the white box disappears and the menu moves up the screen back to its normal position. Subsequent mouseovers push the menu back down as a white box appears at the top again, while the submenu appears correctly to the right.

    The older version worked properly with IE6, but not chrome.

    Reply
  • May 27, 2009 at 12:42 pm
    Permalink

    Kelly

    As mentioned in this post, you have to use the CSS classes.

    iframe.skm,td.skmcur and so on..

    Reply
  • June 9, 2009 at 2:58 pm
    Permalink

    I got the skmmenu working on VS 2008 – works just great. Here’s the rub: on VS 2005, I have everything set up but cannot access the properties on the HTML page – thing is, when I set the layout property to horizontal on the property panel, it resets itself back to vertical – the rest works fine. Any thoughts on this? I’ve scanned the FAQ and no one has that problem. I must be missing something stupid – in the HTML mark up, I cannot access the properties on the page – only the panel and when I do, they are reset. Thanks for any thoughts.

    Reply
  • June 25, 2009 at 5:34 am
    Permalink

    Any idea of implementing menu scroll feature if it exceeds the page height?

    Reply
  • July 17, 2009 at 8:29 am
    Permalink

    Hi, thank you for the post.

    I’m trying to use the skm menu, but i can’t do it works on any browser. In Firefox, the submenu overlaps de main menu. In IE, te submenu appears down and far away from te menu item that own’s it.

    I don’t know if any configuration is missing. I’ve just copied your example but it didn’t work. I’m using VS 2005.

    Please help 🙂

    Thank you

    Reply
  • August 24, 2009 at 5:28 pm
    Permalink

    Hi everyone, I got a problem.

    I have worked with the skmMenu 2.2 and works fine but doesn´t work with Mozilla. What do I have to do ecxactly to work with skmMenu 2.3.
    I just have downloaded the DLL from skmMenu 2.3, I have just to replace it on my old version or what?
    what about the css, do I have to create a new file?

    thak you in advance for your help!!

    excuse my english.

    Reply
  • October 27, 2009 at 8:13 am
    Permalink

    hello

    skmmenu 2.3 working properly in mozila as well as in ie8.but in ie6 it will create problem.in ie6 previous version working properly but mozila creates problem.

    In IE 6 first time it looks good but if u mouseover some times then click somewhere then some menu will be hide…..

    Reply
  • October 27, 2009 at 9:15 am
    Permalink

    Hi

    I’m sorry to hear you are having issues with IE6. I tested this again on IE6 and it works without any issues.

    Did you use the new CSS Classes mentioned in this article ?

    iframe.skm, .skmsubmenu and others..

    Please add them to your Stylesheet and try again.

    Good luck.

    Reply
  • November 17, 2009 at 6:03 am
    Permalink

    hi

    Will this work in a medium trust environment?

    Reply
  • May 6, 2010 at 2:00 am
    Permalink

    Hi,

    Highlight top menu don’t work with css class. For example:
    (…)

    (…)
    don’t keep the cssclass when top menu item selected

    Any ideas?

    Reply
  • May 8, 2010 at 5:04 pm
    Permalink

    Hi,
    I download the .dll and have the same problem, when i set layout:Horizontal and the submenu appears align to the rigth with a lot of spaces.
     
    Help me

    Reply
  • June 17, 2010 at 5:36 pm
    Permalink

    Hello gchandra!
    First, thanks for these fixes. They have definitely helped!
    I don't know if you check this blog, but I'm having an odd problem with the placement of submenuitems. They appear to be rendered down about 170px and over to the right by about 50 px. The header menu items all appear exactly as expected.
    I'm using the CSS items you've described above and haven't been able to correct this problem.
    Any suggestions? This is making me nuts!!
    Here's the markup for the menu:
     
                <cc1:Menu ID="Menu" Layout="Horizontal" Cursor="Pointer" menufadedelay="1" runat="server"
                    CssClass="menustyle"
                    DefaultCssClass="menuitem" DefaultMouseDownCssClass="menumousedown" 
                    DefaultMouseOverCssClass="menumouseover" DefaultMouseUpCssClass="menumouseup" 
                    highlighttopmenu="true" DefaultResolveURL="true" zIndex="1000">
                    <SelectedMenuItemStyle CssClass="menumouseover" />
                    <UnselectedMenuItemStyle CssClass="menuitem" />
                </cc1:Menu>
    Here's the CSS:

     
    iframe.skm {position: absolute; top: 0px; left:0px; display:none;}
    td.skmcur{cursor: pointer;}
     
    .menustyle
    {
        position: relative;
        top: 0;
        left: 0;
        background-color: #3a4f63;
        border: 1px;
        color:  #dde4ec;
    }
    .menuitem
    {
        height: 18px;
        color: #dde4ec;
        line-height: 1.2em;
        padding: 5px 15px 5px 5px;
        vertical-align: middle;
    }
    .submenuitem
    {
        position: relative;
        height: 18px;
        background-color: #3a4f63;
        color: #dde4ec;
        line-height: 1.2em;
        padding: 5px 15px 5px 5px;
        vertical-align: middle;
        top: -200;
        left: -100;
    }
    .menumousedown
    {
        height: 18px;
        background-color: #999999;
        color: #dde4ec;
        font-family: verdana;
        line-height: 1.2em;
        padding: 5px 15px 5px 5px;
        cursor: pointer;
    }
    .menumouseover
    {
        height: 18px;
        background-color: #C0C0C0;
        color: Black;
        font-family: verdana;
        line-height: 1.2em;
        padding: 5px 15px 5px 5px;
        cursor: pointer;
        vertical-align: middle;
    }
    .menumouseup
    {
        height: 18px;
        background-color: #3F3F3F;
        color: #dde4ec;
        font-family: verdana;
        line-height: 1.2em;
        padding: 5px 15px 5px 5px;
        cursor: pointer;
    }

    Reply
  • June 17, 2010 at 5:38 pm
    Permalink

    Oh…by the way…ignore the .submenuitem element. It is there to try to fix the submenuitem placement – to no avail.

    Reply
  • June 28, 2010 at 6:32 pm
    Permalink

    Not working on Firefox for me.  SubMenu items are not rendering correctly.  Checked the css out in firebug and it's not setting left/top attributes.  Works fine in IE8.  Any ideas?

    Reply
  • June 29, 2010 at 12:37 pm
    Permalink

    Michael

    This DLL is compiled based on the same Javascript.

    Its available in source code.. 

    Reply
  • June 29, 2010 at 1:05 pm
    Permalink

    Quick update for anyone experiencing problems with submenu placement:
    I was having the problem of the submenu being rendered hundreds of pixels below and to the right of my top, horizontal menu. I discovered that by removing the "position: relative" tag from my CSS file in all menu elements, the problem was fixed.
    Definitely try removing that element to see if it works for you.

    Reply
  • December 2, 2011 at 6:59 am
    Permalink

    font of the submenuitem is not changing with .submenuitem class,
    font-family : Verdana; font-size : small; of the Cssclass is not working. Showing the default font name and size. Back ground is changing properly.

    Any idea?

    Thanks in advance 🙂

    Reply
  • May 18, 2020 at 3:52 pm
    Permalink

    Another thank you, from May 2020!

    Updating some legacy code that used an earlier (maybe 2003?) version of skmMenu. Only worked when in compatibility mode targeting an embarrassingly old version of IE.

    The v2.3 version of the DLL posted here allowed the menu code to work on Chrome and Edge, but we still had a problem on a few pages, where the generated menus appeared cut off, as though other screen elements lay atop them.

    So, I examined the source code published here, running Visual Studio’s one-way conversion to current standards.

    Opened Menu.resx, and inserted one line at 102, so that my version of Menu.resx lines 100-103 now read:

    100 document.getElementById(childID).style.display=’block’;
    101 document.getElementById(childID).style.position=’absolute’;
    102 document.getElementById(childID).style.zIndex = “2000”;
    103 skm_OpenMenuItems = skm_OpenMenuItems.concat(childID);

    Tweaked the version number, re-compiled, and confirmed that the new zIndex assignment fixed our problem on
    Chrome (81.0.4044.138) (64bit) and Edge (81.0.416.72) (64bit)

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: