Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Menu Height Posts
  • Menu Height #8709

    Mr Sparkle
    Member

    I am testing jqwidgets for implementation in my asp.net site.

    One issue has me baffled. I have a horizontal menu at the top of the page (contained in a Masterpage). I have set the menu height to 32px.

    When the page loads (I have ckeditor on the page so it takes a bit longer than usual) the menu does not appear until the page has fully loaded. That is fine. The problem is that the menu height seems to be ~300px height until the page has fully loaded, it is not until the page/menu fully loads that it shrinks back to 32px height.

    So initially the contents of the page appear 1/2 way down the page, once it has fully loaded it shrinks back to 32px height?

    I am using jquery 1.8.2, and the latest jqwidgets.

    Any suggestions?

    Menu Height #8714

    Dimitar
    Participant

    Hello Mr Sparkle,

    You can try the following approach – make the list from which the menu is build hidden until the menu is fully loaded and then return it to visible.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'>jQuery Menu - Horizontal Menu Sample</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
    type="text/css" />
    <style type="text/css">
    #menu
    {
    visibility: hidden;
    }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create a jqxMenu
    $("#jqxMenu").jqxMenu({ width: 600, height: 30 });
    $("#menu").css('visibility', 'visible');
    });
    </script>
    </head>
    <body>
    <div id='content'>
    <div id='jqxWidget'>
    <div id='jqxMenu'>
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li>About Us
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Our Vision</a></li>
    </ul>
    </li>
    <li>Services </li>
    <li>Products
    <ul>
    <li><a href="#">New</a>
    <ul>
    <li><a href="#">Corporate Use</a></li>
    <li><a href="#">Private Use</a></li>
    </ul>
    </li>
    <li><a href="#">Used</a>
    <ul>
    <li><a href="#">Corporate Use</a></li>
    <li><a href="#">Private Use</a></li>
    </ul>
    </li>
    <li><a href="#">Featured</a></li>
    </ul>
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.