jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › How to set auto width for long menu items?
Tagged: JavaScript Menu, jQuery Menu, menu-width
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 11 months ago.
-
Author
-
I wonder how to set the width to 100% or auto when there is a really long menu item? Any thoughts?
Thanks
Shahbaz
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.