Menu Height - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Menu Height Posts

September 30, 2012 at 2:12 pm Menu Height #8709

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?

October 1, 2012 at 6:04 am 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/

Author

Posts

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

You must be logged in to reply to this topic.