Script(s)

technology as-is

skmMenu 2.3 : Consolidated Post IE8, Firefox, Chrome

| 29 Comments

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 🙂

29 Comments

  1. Thank you VERY much for that.

  2. 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

  3. 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)?

  4. 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

  5. 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.

  6. Hi,

    thank you for this fix too.

  7. Sorry, this fix does not work with examples provided at http://skmmenu.com/menu/Download/

  8. 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.

  9. 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

  10. cooldude,

    Try the following..

    Highlight Top Menu

    http://www.skmmenu.com/menu/Examples/HighlightTopMenu.aspx

    or

    Try using mouseovercssclass / mouseupcssclass XML elements

    http://www.skmmenu.com/menu/Download/XMLStructure.html

  11. 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.

  12. Kelly

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

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

  13. 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.

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

  15. 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

  16. 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.

  17. 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…..

  18. 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.

  19. hi

    Will this work in a medium trust environment?

  20. Hi,

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

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

    Any ideas?

  21. 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

  22. 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;
    }

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

  24. 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?

  25. edit: Fixed my issue with FireFox, had an older version of the javascript file that wasn't placing 'px' after the integer value, which FireFox requires.  Are you posting the latest JS file anywhere?  I couldn't find it on your blogs, tracked it down here: http://weblogs.asp.net/cfrazier/archive/2007/03/22/skmmenu-code-change-to-work-with-xhtml-doctypes.aspx
    -Michael

  26. Michael

    This DLL is compiled based on the same Javascript.

    Its available in source code.. 

  27. 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.

  28. 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 🙂

Leave a Reply

Required fields are marked *.