jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Responsive Menu?

Tagged: ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Responsive Menu? Posts
  • April 1, 2013 at 5:39 pm Responsive Menu? #18359

    vmanne
    Participant

    What is best configuration for responsive design for Menu widget. I have the menu inside of a responsive container, however, it appears the width parameter is being slapped on to the widget automatically?

    My menu is defined as follows: $(‘#jqxNavMenuBar’).jqxNavigationBar({ expandMode: ‘singleFitHeight’, width:’50%’, height:’50%’});

    How do I make it responsive just like its parent?

    Thanks,
    Vik

    April 2, 2013 at 9:16 am Responsive Menu? #18379

    Peter Stoev
    Keymaster

    Hi vmanne,

    Setting the Navigation Bar’s width and height to 50% will make the widget to take 50% of its container’s size. If you want it to fit to the container, set the width and height to 100%.

    Example built with jQWidgets 2.8. In the code below, the jqxNavigationBar is placed within a container DIV tag. That DIV tag takes 80% of the browser window’s size. The jqxNavigationBar will take “50%” of its container’s size.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
        <style>
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create jqxNavigationBar.
                $("#jqxNavigationBar").jqxNavigationBar({ width: '50%', height: '50%', theme: theme });
            });
        </script>
    </head>
    <body>
        <div style="width: 80%; height: 80%;">
            <div id="jqxNavigationBar">
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/mailIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Mail
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Contacts</a></li>
                        <li><a href='#'>Mails</a></li>
                        <li><a href='#'>Notes</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/contactsIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Contacts
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Business Cards</a></li>
                        <li><a href='#'>Address Cards</a></li>
                        <li><a href='#'>Detailed Address Cards</a></li>
                        <li><a href='#'>Phone List</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/tasksIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Tasks
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Simple List</a></li>
                        <li><a href='#'>Detailed List</a></li>
                        <li><a href='#'>Active Tasks</a></li>
                        <li><a href='#'>Phone List</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/notesIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Notes
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Icons</a></li>
                        <li><a href='#'>Notes List</a></li>
                        <li><a href='#'>Last Seven Days</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    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.