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:

via Self-resizing Navigation Menu with jQuery | Codrops.