jQWidgets Forums

jQuery UI Widgets Forums Navigation Menu, Context Menu How to set auto width for long menu items?

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

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

  • kreativemart
    Member

    I wonder how to set the width to 100% or auto when there is a really long menu item? Any thoughts?

    Thanks

    Shahbaz


    Peter Stoev
    Keymaster

    Hi Shahbaz,

    It is possible to set the Sub-Menus Width to a Fixed width set in Pixels.

    For example:

    <div id='jqxMenu'>
    <ul>
    <li><a href="#Home">Home</a></li>
    <li>Solutions
    <ul style='width: 600px;'>
    <li><a href="#Education">Education</a></li>
    <li><a href="#Financial">Financial services</a></li>
    <li><a href="#Government">Government</a></li>
    <li><a href="#Manufacturing">Manufacturing</a></li>
    <li type='separator'></li>
    <li>Software Solutions Consumer photo and video Consumer photo and video Consumer photo and video
    <ul style='width: 220px;'>
    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
    <li><a href="#Mobile">Mobile</a></li>
    <li><a href="#RIA">Rich Internet applications</a></li>
    <li><a href="#TechnicalCommunication">Technical communication</a></li>
    <li><a href="#Training">Training and eLearning</a></li>
    <li><a href="#WebConferencing">Web conferencing</a></li>
    </ul>
    </li>
    <li><a href="#">All industries and solutions</a></li>
    </ul>
    </li>
    </ul>
    </div>

    You can also add an ID to UL tag and set its Width before the jqxMenu’s initialization.

    For example:

    <div id='jqxMenu'>
    <ul>
    <li><a href="#Home">Home</a></li>
    <li>Solutions
    <ul id="myID">
    <li><a href="#Education">Education</a></li>
    <li><a href="#Financial">Financial services</a></li>
    <li><a href="#Government">Government</a></li>
    <li><a href="#Manufacturing">Manufacturing</a></li>
    <li type='separator'></li>
    <li>Software Solutions Consumer photo and video Consumer photo and video Consumer photo and video
    <ul style='width: 220px;'>
    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
    <li><a href="#Mobile">Mobile</a></li>
    <li><a href="#RIA">Rich Internet applications</a></li>
    <li><a href="#TechnicalCommunication">Technical communication</a></li>
    <li><a href="#Training">Training and eLearning</a></li>
    <li><a href="#WebConferencing">Web conferencing</a></li>
    </ul>
    </li>
    <li><a href="#">All industries and solutions</a></li>
    </ul>
    </li>
    </ul>
    </div>

    In the above code, note the ‘myID’ tag.

    Set the Width to the document body’s width before the jqxMenu initialization.

    $(“#myID”).width($(document.body).width());
    $(“#jqxMenu”).jqxMenu({ width: ‘600’, height: ’30px’ });

    Hope this helps.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.