April 29, 2012
How to stretch this CSS menu to 100%
Question by John Smith
Here’s a fantastic CSS menu:
The only disadvantage its not stretched to 100%… if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? Im new to CSS
Answer by Starx
Modify its width as 100% will make the menu span to full width.
#myfantasticmenu { width: 100%; }
I simulated the change with firebug and the needed Style defination was
#nav {
overflow: hidden; /* To clear the div */
width: 100%;
}
And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.
If you consider using jQuery then it will something like
childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);
If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.
