How to set auto width for long menu items?

[kreativemartMember]

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

Thanks

Shahbaz

[Peter StoevKeymaster]

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

[Author]

Posts