jQWidgets Forums

jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Menu items font size

Tagged: 

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Menu items font size Posts
  • July 27, 2012 at 5:06 pm Menu items font size #6384

    bmesser
    Member

    Hi

    A very simple question but how do I increase the font size in a menu widget?

    I’ve added a font-size to the jqx.base.css with no effect.

    Bruce.

    July 30, 2012 at 5:32 am Menu items font size #6395

    Dimitar
    Participant

    Hi Bruce,

    Here is an example based on the one in the widget documentation with changed font size. Notice you have to change the size of the menu itself, too.

    <!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="jqx.base.css" type="text/css" />
    <!-- The next style changes the font size-->
        <style type="text/css">
            .jqx-menu-item-top, .jqx-menu-item
            {
                font-size:30px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jqxcore.js"></script>
        <script type="text/javascript" src="jqxmenu.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create a jqxMenu
                    $("#jqxMenu").jqxMenu({ width: 1000, height: 60 });//remember to change the size of the menu accordingly!
                });
            </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/

    July 31, 2012 at 10:07 am Menu items font size #6432

    bmesser
    Member

    Hi Dimitar

    Thanks for that snippet it works great and I can now fix the font size which then gives me another problem…

    An overlong menu entry gets wrapped to fit the size of the top level menu on the menu-bar. Can I change the width of the drop down menu box to accommodate an entry and not wrap it?

    I tried the obvious setting the width property in the CSS file without any luck.

    Bruce.

    July 31, 2012 at 10:26 am Menu items font size #6437

    Dimitar
    Participant

    Hi Bruce,

    Just change the width of the unordered list when there is a longer entry in it. Here is the solution:

    <!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="jqwidgets/styles/jqx.base.css" type="text/css" />
    <!-- The next style changes the font size-->
        <style type="text/css">
            .jqx-menu-item-top, .jqx-menu-item
            {
                font-size:30px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.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: 1000, height: 60 }); //remember to change the size of the menu accordingly!
                });
            </script>
            <div id='jqxWidget'>
                <div id='jqxMenu'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li>About Us
                            <ul style="width:400px"> <!-- change the width of the unordered list with long list item names -->
                                <li><a href="#">History History 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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.