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

Tagged: , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Menu Style Posts
  • September 19, 2012 at 3:10 am Menu Style #8132

    shaser
    Member

    Hi, how I can change the menu style too redmond the jquery ui?

    Thanks

    September 19, 2012 at 6:06 am Menu Style #8142

    Dimitar
    Participant

    Hello shaser,

    Here is an example, answering your question. For more information, please take a look at jqxMenu Styling and Appearance.

    <!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 and Context Menu - CSS Styling Sample</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.6.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: 600, height: 30, theme: 'ui-redmond'});
                });
            </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>

    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.