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

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
  • 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?

    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

    • This reply was modified 11 years, 11 months ago by  Peter Stoev.
    • This reply was modified 11 years, 11 months ago by  Peter Stoev.
    • This reply was modified 11 years, 11 months ago by  Peter Stoev.
    • This reply was modified 11 years, 11 months ago by  Peter Stoev.
    • This reply was modified 9 years, 10 months ago by  support.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.