css menu Archives - wonderwebware blog

Changing the width of menu made with css menu generator

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:

<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>

<ul>

<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>

<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>

</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:

.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 */
}

.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:

.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 */
}

.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.

CSS Menu and !DOCTYPE

From time to time users are asking my why IE7/8/9 doesn’t show the popup menu on hover. And often the reason is bad !DOCTYPE of the html page.

For some reason IE is sensitive to these. For example, IE7 may not support the menu popup feature if your document starts with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

And if you put the right code everything will start to work:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

In this case IE just wants to see the exact full definition for HTML 4.1 or else it doesn’t render the page as expected.

If there is no !DOCTYPE definition, add it.

If it is not the right one, replace it with the proper version.

Here are the most common:

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Most other modern browsers will be able to work even if the doctype isn’t in it’s full version, but IE is (as always) a special case…

css menu 4.1

The new version of css menu generator is now available for download. Free version users will not see most of the changes (because there are no images supported in the free version yet) but there are also some bugfixes in the menu code, so I offer you to download the update. And yes, there will be new version soon (I hope in the next weeks), this time — with new menu options.

css menu

css Menu Generator Version 4.0 is now ready for download…

What’s new?

The whole tool completely rewritten (based on TemplateShaker code, it now comes with far better functionality);
pull-down menu code rewritten, now the menu supports more sub-levels;
Multi-level vertical menu added;
Help info added;
The long-waited “Save” functionality added
Number of changes in the interface
Many fixes and improvements

How to update?

Just visit the website and download the new version:http://wonderwebware.com/css-menu/

Centering CSS Menu

I receive this question relatively often: “how to center a menu generated with css menu generator”. Well, here are two examples – one for centering the menu on page and one for centering menu items. For both examples — I am using simple menu saved directly as xhtml file.

A) centering the menu on page

1) Put the menu in new DIV container (in this example – container class=”wrapper”):

2) in the css section, add this code to center the wrapper div:

.wrapper {
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

B) Centering the text of the menu items

To center the text of the menu sub-items, just change the following css code:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}

to:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0; text-align:center;}

M	T	W	T	F	S	S
« May
					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	27	28	29	30
31

Category: css menu

Changing the width of menu made with css menu generator

1) Change the width of the menu bar

2) Resize the submenu items

CSS Menu and !DOCTYPE

Adding CSS Menu to your page: step by step example

css menu 4.1

css menu

css Menu Generator Version 4.0 is now ready for download…

What’s new?

How to update?

css Menu Generator 3.5

Centering CSS Menu