From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
Pingback: uberVU - social comments
… pretty neat!
However, the ‘slef’ part of of the resizing is a bit misleading though.
Wouldn’t it be truly resizing on its own if it read the width of the parent container or the viewport (if it sits in the window, not being nested in any way)? Just a thought. Thanks.
Pingback: Tweets that mention Self-resizing Navigation Menu with jQuery | Codrops -- Topsy.com
Nice post. Keep up the good work
It would be good if it was a fixed width container the menu item widths changed based on the number of menu items.
For example the container width is 500px (fixed). Each menu item would be resized based on total number of menu items.
For example if 5 menu items, resize each item to 98px. If 4 menu items: 123px and so on…
I don’t get this. When you design your website you know the width of the page. Why not simple make the calculation done in the JavaScript once and then hard code the size into the CSS? Why the need for JavaScript in the first place? Is this impossible using only CSS?
If you have a menu with tree elements and you want it to be exacly 400 pixels wide you would have to make on the elements one pixel wider than the other two. This script does not compensate for rounding errors.
@Jan I think that’s what is written in the post, you can do it manually, but again, you will have to “do” it
Just wondering if anyone knows how to adapt this to a drop-down menu?
As is, it divides the container width by the total number of list items, not just the top-most ones.
Figured it out myself, by the way (not a coder, so I’m pretty happy with myself).
Just changed line 5 of the jQuery to:
var menuItems = $(‘#Menu li’).size() – $(‘.HasSubMenu li’).size();
Very pleased!