Jmenu rendering issue while loading

Question

I am using Jquery Jmenu for Menu display.It displays as list view while loading page in IE8. After loading, few seconds later it displays as normal horizontal view. Whereas its working fine on Chrome browser. Please help on this. This is the css we are using. Its showing data in HTML format while loading menu. not applying jquery css fileson menu during loading time

.jMenu {
    display: table;
    margin: 0;
    padding: 0
}

/* First level */
.jMenu li {
    display: inline;
    background-color: rgb(000,063,096);
    margin: 0;
}

.jMenu li a {
    padding: 10px;
    display: inline;
    background-color: transparent;
    color: white;
    text-transform: capitalize;
    cursor: pointer;
    font-size: 12px;
}

/* Lower levels */
.jMenu li ul {
    display: none;
    position: absolute;
    z-index:9999;
    padding: 0;
    margin: 0;
}

.jMenu li ul li {
    background-color: rgb(000, 063, 096);
    display: block;
    border-bottom: 1px solid #484548;
    padding: 0;
}

.jMenu li ul li.arrow {
    background-color: rgb(000, 063, 096);
    background-image: url('../images/arrow_down.png');
    background-repeat: no-repeat;
    background-position: center center;
    height: 6px;
    padding: 0;
    border-bottom: none;
    padding-bottom: 10px
}

.jMenu li ul li a {
    font-size: 11px;
    text-transform: none;
    padding: 5px;
    display: block;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.jMenu li ul li a.isParent {
    background-color: #f2f2f2 ;
    background-image: url('../images/arrow_right.png');
    background-repeat: no-repeat;
    background-position: right center;
    color: #000000;

}

.jMenu li ul li a:hover {
    background-color: #c4e0f6;
    border-top: 1px solid #c4e0f6;
    border-bottom: 1px solid #c4e0f6;
    color: #000000;
}

Binding that HTML format tags with Literal

   <table border="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 100%" class="topMenuBar">
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </td>
    </tr>
</table>

Jquery function

 <link rel="stylesheet" type="text/css" href='<%# ResolveUrl("~/jMenu-master/css/jMenu.jquery.css") %>'/>
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery.min.js") %>'></script>
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery-ui.js") %>'></script>
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jMenu.jquery.js") %>'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jMenu").jMenu({
                ulWidth: '150',
                effects: {
                    effectSpeedOpen: 300,
                    effectTypeClose: 'slide'
                },
                animatedText: false
            });
        });


    </script>


![this is how html format coming while loading menus]

maybe that's ie problem, maybe giv us your ie version and try checking your css — Huei Tan, Jul 31 '13 at 06:47

score 0 · Answer 1 · answered Sep 20 '14 at 11:42

Try this - In our case we are showing the menu in ul and we have initially hiding it, by style property of the controls. After complete page rendering and after binding of jquery methods display it by using css or your convinience.

<ul class="menu-hvr" id="jMenu" style="display:none">
            @if (!showUserMenu)
            {
                <li class="buttonFirstAll homebtn1">
                    <a href="/sign-up">sign up</a>
                </li>
                <li class="homebtn2">
                    <a href="/sign-in/?popup=true">sign in</a>
                </li>
            }........
    </ul>

Jmenu rendering issue while loading

1 Answers1