Blogs

In this post, we will show you in a few steps what you need to do in order to display the jqxMenu’s top-level menu items in the center of the widget.

Step 1: Create a new web page.
Step 2: Include the jQuery framework, jqxcore.js, jqxmenu.js, jqx.base.css and jqx.fresh.css.
Step 3: Create the Menu structure in the HTML body.

<div id='jqxMenu'>
    <ul>
        <li><a href="#Home">Home</a></li>
        <li>Solutions
            <ul style='width: 250px;'>
                <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
                    <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>
        <li>Products
            <ul>
                <li><a href="#PCProducts">PC products</a></li>
                <li><a href="#MobileProducts">Mobile products</a></li>
                <li><a href="#AllProducts">All products</a></li>
            </ul>
        </li>
        <li>Support
            <ul style='width: 200px;'>
                <li><a href="#SupportHome">Support home</a></li>
                <li><a href="#CustomerService">Customer Service</a></li>
                <li><a href="#KB">Knowledge base</a></li>
                <li><a href="#Books">Books</a></li>
                <li><a href="#Training">Training and certification</a></li>
                <li><a href="#SupportPrograms">Support programs</a></li>
                <li><a href="#Forums">Forums</a></li>
                <li><a href="#Documentation">Documentation</a></li>
                <li><a href="#Updates">Updates</a></li>
            </ul>
        </li>
        <li>Communities
            <ul style='width: 200px;'>
                <li><a href="#Designers">Designers</a></li>
                <li><a href="#Developers">Developers</a></li>
                <li><a href="#Educators">Educators and students</a></li>
                <li><a href="#Partners">Partners</a></li>
                <li type='separator'></li>
                <li>By resource</li>
            </ul>
        </li>
        <li>Company
            <ul style='width: 180px;'>
                <li><a href="#About">About Us</a></li>
                <li><a href="#Press">Press</a></li>
                <li><a href="#Investor">Investor Relations</a></li>
                <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                <li><a href="#Careers">Careers</a></li>
                <li><a href="#Showcase">Showcase</a></li>
                <li><a href="#Events">Events</a></li>
                <li><a href="#ContactUs">Contact Us</a></li>
                <li><a href="#Become an affiliate">Become an affiliate</a></li>
            </ul>
        </li>
    </ul>
</div>​

Step 4: Initialize the Menu widget.

$("#jqxMenu").jqxMenu({ width: '100%', height: '30px', theme: 'fresh'});

Step 5: Center the Menu items. To center the items, we need to set the first item’s left margin to an appropriate value. In the centeritems function below, we calculate the menu’s width and the summary width of its items. Then we calculate the value which we need to set as a left margin.

var centerItems = function () {
    // update filter item's margin.
    var firstItem = $($("#jqxMenu ul:first").children()[0]);
    firstItem.css('margin-left', 0);
    var width = 0;
    var borderOffset = 2;
    // calculate the summary items width.  
    $.each($("#jqxMenu ul:first").children(), function () {
        width += $(this).outerWidth(true) + borderOffset;
    });
    // get the menu's width.
    var menuWidth = $("#jqxMenu").outerWidth();
    // center the menu items by changing the margin of the first item.
    firstItem.css('margin-left', (menuWidth / 2 ) - (width / 2));
}
// center menu items.
centerItems();
$(window).resize(function () {
    centerItems();
});​

Online Sample: http://jsfiddle.net/jqwidgets/wEf8Z/.