Self-resizing Navigation Menu with jQuery

Today I am going to share a nice CSS only (with some jQuery) navigation menu that adapts the size of its list items automatically. Sometimes you need to reuse a menu and it can take some work to adapt the list items if you would like to spread them evenly.

So, here is a little attempt to simplify this process by resizing the menu and list items with a simple jQuery function. The function takes a width value as input and resizes the links inside of the list elements according to the number of elements that are in the list. If we, for example, have a menu with a width of 600px and there are 6 list items in the list, each link element would get the width of 100px. It might be overkill to be so lazy and not do it manually in the CSS, but it might be a nice example of how you can dynamically adapt the size of elements.

The markup looks like this:

<div class="codropsmenu1" id="menu">
	<ul>
		<li><a href="" class="first"><span>Home</span></a></li>
		<li><a href=""><span>About</span></a></li>
		<li><a href=""><span>Portfolio</span></a></li>
		<li><a href=""><span>Contact</span></a></li>
		<li><a href=""><span>Support</span></a></li>
		<li><a href="" class="last"><span>Login</span></a></li>
	</ul>
</div>

And the CSS look like the following:

.codropsmenu1{
    padding:3px;
    height:30px;
    background-color:#282828;
}
.codropsmenu1 ul{
    list-style:none;
    margin:0px;
    padding:0px;
}
.codropsmenu1 ul li{
    display:inline;
    position:relative;
}
.codropsmenu1 ul li a{
    float:left;
    height:28px;
    line-height:30px;
    text-align:center;
    text-decoration:none;
    display:block;
    background-color:#282828;
    font-size:12px;
    color:#DDDFDF;
    text-shadow: 0 1px 0 #000000;
    border-right:1px solid #000;
    border-left:1px solid #404040;
    border-top:1px solid #282828;
    border-bottom:1px solid #282828;
    outline:none;
    cursor:pointer;
    overflow:hidden;
}
.codropsmenu1 ul li a.last{
    border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
    border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
    background-color:#404040;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    color:#fff;
}

The jQuery part:

$(function() {
    changeWidth(500);

    function changeWidth(menuWidth){
        var menuItems = $('#menu li').size();
        var itemWidth = (menuWidth/menuItems)-2;

        $('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

So, what we do is to initially set the width of the menu to 500px. The function then receives a width value and resizes the link elements accordingly. We need to add 2px to the fraction since we have to consider the borders.

Enjoy it!