加载时出现 Jmenu 渲染问题答案

【问题标题】：Jmenu rendering issue while loading加载时出现 Jmenu 渲染问题
【发布时间】：2013-07-30 10:37:34
【问题描述】：

我正在使用 Jquery Jmenu 进行菜单显示。它在 IE8 中加载页面时显示为列表视图。加载后，几秒钟后它显示为正常的水平视图。而它在 Chrome 浏览器上运行良好。请帮助解决这个问题。这是我们正在使用的 css。它在加载菜单时以 HTML 格式显示数据。在加载期间不应用 jquery css 文件菜单

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

将 HTML 格式标签与 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函数

 <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]

【问题讨论】：

上面提到了我的代码。请帮忙
也许是ie的问题，也许给我们你的ie版本并尝试检查你的css

标签： jquery jmenu

【解决方案1】：

试试这个 - 在我们的例子中，我们在 ul 中显示菜单，我们最初通过控件的样式属性隐藏它。页面渲染完成后，绑定jquery方法后，使用css或您的方便显示。

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

【讨论】：