This is very short tutorial that should help you to customize the width of the css menus generated with my css menu generator tool.
There are 2 hypotheses here: you want to resize the top-menu bar (the always visible menu line) or you want to change the width of the submenu items.
1) Change the width of the menu bar
This one is quite simple — just put your menu in container with specified width, something like that:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div style="width: 100px;"> <!-- PULL DOWN MENU - BEGIN --> <div class="mainmenu"> <ul> <li class="li_nc"><a href="/" target="_self" >Home</a></li> <li class="li_hc"><a href="Angel-on-the-Ropes.html" target="_self" >Angel on the Ropes</a><ul class="ul_ch"> <li class="li_hc"><a href="#" target="_self" >Read the first chapter</a><ul class="ul_ch"> <li class="li_nc"><a href="#" >Read the html version</a></li> <li class="li_nc"><a href="#" >Read/Download the PDF version</a></li> </ul></li> </ul></li> <li class="li_hc"><a href="#" target="_self" >Services</a><ul class="ul_ch"> <li class="li_nc"><a href="#" target="_self" >Service 1</a></li> <li class="li_nc"><a href="#" target="_self" >Service 2</a></li> <li class="li_nc"><a href="#" target="_self" >Service 3</a></li> <li class="li_nc"><a href="#" target="_self" >Service 4</a></li> <li class="li_nc"><a href="#" target="_self" >Service 5</a></li> </ul></li> </ul> </div> <!-- END OF PULL DOWN MENU --> </div> |
Put whatever value you need instead of “100px” in the example above
2) Resize the submenu items
The sub-menu width needs some not so trivial changes in the css.
Look between lines 57-82 of the css file, it should look similar to that:
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.mainmenu li ul { position: absolute; left: -999em; height: auto; width:15em; /* <== Change 15em to new value */ background: #C0C0C0; font-weight: normal; border-width: 1px; margin: 0; } .mainmenu li li { width:15em ; /* < == Change "15em" to new value */ } .mainmenu li li a{ width:13em ; /* <== Change "13em" to new value, note the margin from 15em to 13em */ } .mainmenu li ul { margin: 0; } .mainmenu li ul ul { margin: -2.8em 0 0 13.5em; /* <== Change "13.5em" to new value */ } |
(the comments are pointing the values to be changed)
Let say you want to give 2 ems more for the submenu width. In such case it must look like that now:
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.mainmenu li ul { position: absolute; left: -999em; height: auto; width:17em; /* <== added 2em to 15em */ background: #C0C0C0; font-weight: normal; border-width: 1px; margin: 0; } .mainmenu li li { width:17em ; /* <== added 2em to 15em */ } .mainmenu li li a{ width:15em ; /* <== added 2em to 13em, keeping the proportion */ } .mainmenu li ul { margin: 0; } .mainmenu li ul ul { margin: -2.8em 0 0 15.5em; /* <== added 2em to 13.5em, keeping the proportion */ } |
As you see, the easiest way is to add/substract what you need, but keeping the proportion. Still, it’s up to you — I prefer to use “ems” but you can set pixels or points or what best suits your needs.