jQuery Menu with Centered Items

The sample demonstrates how to center the top-level Menu items. The a jQuery Menu widget used in the sample is called jqxMenu. For more information about it, visit: http://www.jqwidgets.com.

by jqwidgets

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.fresh.css">
<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...

JavaScript

$("#jqxMenu").jqxMenu({ width: '100%', height: '30px', theme: 'fresh'});
            
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();
});