jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Scrollable Menu

Tagged: , , , , ,

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Scrollable Menu Posts
  • February 27, 2014 at 4:36 am Scrollable Menu #50194

    DeviNagaraj
    Participant

    Hi ,I tried to use the jqxMenu with the fixed width.If my menu items exceeds the width then I want horizontal scrollbar.But I don’t have any idea about this.can you please help me.And I tried the below code but it was not working.Please guide me in the correct path.

    <!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 - Scrollable Menu Sample</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js""></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 500, height: 30 });
                $("#jqxMenu").css('overflow-x', 'scroll');
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <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>

    Thanks in Advance,
    Devi Nagaraj

    February 27, 2014 at 7:34 am Scrollable Menu #50207

    Dimitar
    Participant

    Hello Devi Nagaraj,

    Unfortunately, this feature is not supported by jqxMenu.

    Best Regards,
    Dimitar

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

    April 4, 2016 at 10:20 pm Scrollable Menu #83126

    nkanthed
    Participant

    Hi Dimitar

    Does jqxMenu supports scrollbar now in 4.0? We have a requirement where we need scrollbar on jqxMenu.

    Thanks
    Nitin K

    April 5, 2016 at 5:36 am Scrollable Menu #83135

    Dimitar
    Participant

    Hi Nitin K,

    If you set overflow: auto; to the initialization div of the menu, a scrollbar will appear if necessary. Here is an example: https://www.jseditor.io/?key=scrollable-menu. This solution is only suitable for vertical menus, though.

    Please also note that the latest version of jQWidgets is 4.1.1.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.