jQuery UI Widgets Forums Navigation Menu, Context Menu jqXmenu – display Issue – ver 3.8

This topic contains 2 replies, has 2 voices, and was last updated by  Keshavan 8 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • Keshavan


    I have implemented jqxMenu, the problem is that at first when the login page is invoked, the menu first renders in
    Vertical fashion and then changes to Horizontal menu. Inspite of menu being defined to be Horizontal.
    I have pasted the code below, this happens for all screens in my MVC4 application.

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="utf-8" />
        <title id='Description'>
        <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
        <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
        <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="/Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnotification.js"></script> 
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <!--SignalR script to update the chat page and send messages.-->
        @RenderSection("Heads", required: false)
        @RenderSection("scripts", required: false)
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxMenu").jqxMenu({ width: '960px', mode: 'horizontal', theme: 'ui-sunny' });  //
            $(function () {
                var chat = $.connection.chatHub;
                // Create a function that the hub can call back to display messages.
                chat.client.addNewMessageToPage = function (name, message) {
                    // Add the message to the page.
                    $('#messageNotification').jqxNotification({ disabled: false });
                // Start the connection.
                $.connection.hub.start().done(function () {
                    var name = "Keshavan";
                    var message = "Hello";
                width: 250, position: "top-right", opacity: 0.9,
                autoOpen: true, animationOpenDelay: 50, autoClose: true, autoCloseDelay: 30000, template: "info", disabled: true
                    <div id='jqxMenu' style="margin-top: 0%; ">
                            <li><a href="/Compani/Index">Company</a></li>
                                    <li><a href="/Category/Index">Category</a></li>
                                    <li><a href="/Brand/Index">Brand</a></li>
                                    <li><a href="/Product/Index">Product</a></li>
                            <li><a href="/Supplier/Index">Supplier</a></li>
                            <li><a href="/Personnel/Index">People</a></li>
                            <li><a href="/Lead/Index">Lead</a></li>
                            <li><a href="/Customer/Index">Account</a></li>
                            <li><a href="/Jplan/Index">DRS</a></li>
                                <a href="#">Order</a>
                                    <li><a href="/Order/Index">Create</a></li>
                                    <li><a href="/AmendOrder/Index">Amend</a></li>
                            <li><a href="/Ship/Index">Logistics</a></li>
                            <li><a href="/Receievebles/Index">Settlement</a></li>
                                <a href="#">Inv Upload</a>
                                    <li><a href="#">Template</a></li>
                                    <li><a href="/ImportEF/ImportEF">Inventory</a></li>
                            <li><a href="/Account/RoleCreate">Admin</a>
                            <li><a href="/Home/Chat">Chat</a>
        <div id="body">
            <section id="body1" class="content-wrapper main-content clearfix cl1">
        <footer style="width: 960px;">
            <div class="content-wrapper">
                <span class="float-left" style="font-weight: 800; font-size: larger; color: white">
                    &copy; @DateTime.Now.Year - Orderman - Making your business better all the time.
        <div id="messageNotification"></div>
    • This topic was modified 8 years, 9 months ago by  Keshavan.


    Hi Keshavan,

    Please try the approach of the demo Default Functionality, where the menu div is invisible initially and is shown after the widget has been initialized.

    Best Regards,

    jQWidgets team


    Hi Dimitar,

    Thanks for the solution.

    Best Regards,

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.