jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Menu with Images

Tagged: , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Menu with Images Posts
  • October 12, 2011 at 1:35 pm Menu with Images #947

    ijekov
    Member

    I am looking for a jQuery Menu widget and I came across to yours. My task requires displaying images and text next to some of the menu items. I also have to display ‘tooltips’ with description text. How to achieve this using your Menu?

    October 13, 2011 at 5:24 am Menu with Images #961

    Peter Stoev
    Keymaster

    Hi ijekov,

    Thank you for writing.

    In order to insert images in menu items you need to add <img/> tag in the HTML markup inside the LI elements. After the jqxMenu is initialized, it will display the image inside menu item.

    The following code example demonstrates how to insert an image to a top-level and sub-level menu items. See the “Home” and “History” LI elements.

    <!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>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.default.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 () {
                    var theme = $.data(document.body, 'theme');
                    if (theme == null || theme == undefined) theme = '';
             
                    // Create a jqxMenu
                    $("#jqxMenu").jqxMenu({ width: '120',  mode: 'vertical', theme: theme });
                });
            </script>
            <div id='jqxWidget' style='width: 110px;'>
                <div id='jqxMenu'>
                    <ul>
                        <li><img src='../../images/menu.png'/><a href="#">Home</a></li>
                        <li>About Us
                            <ul>
                                <li><img src='../../images/menu.png'/><a href="#">History</a></li>
                                <li><a href="#">Our Vision</a></li>
                                <li><a href="#">The Team</a>
                                    <ul>
                                        <li><a href="#">Brigita</a></li>
                                        <li><a href="#">John</a></li>
                                        <li><a href="#">Michael</a></li>
                                        <li><a href="#">Peter</a></li>
                                        <li><a href="#">Sarah</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Clients</a></li>
                                <li><a href="#">Testimonials</a></li>
                                <li><a href="#">Press</a></li>
                                <li><a href="#">FAQs</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

You must be logged in to reply to this topic.