CSS Menu Generator - HELPfor more info on how to use CSS Menu Generator -- read below...
Help InfoThe latest version comes with integrated help. Just click the respective "Help" button for any given option and you'll get instant help within the program itself. For troubles and problems -- read the FAQ page.
In case you need step-by-step example, just read below. |
There are 4 main steps in menu creation process: (1) selecting the right menu template, (2) customizing the menu, (3) getting the code and (4) adding the menu to your pages. The first 3 steps are integrated in the CSS Menu Generator itself, the last one could be little tricky if you are novice in the web design (that's where this guide should help).
4.1. If you open the example (index.html) page, you will see two important pieces of code:
<!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">
<head><title>CSS DropDown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- Keep the http-equiv meta tag for IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- Link the CSS file here -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />
</head>
<body>
<!-- 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="my_target_page.html" target="_self" >Products</a><ul class="ul_ch">
<li class="li_hc"><a href="#" target="_self" >Product 1</a><ul class="ul_ch">
<li class="li_hc"><a href="#" >Description</a><ul class="ul_ch">
<li class="li_nc"><a href="#" >Overview</a></li>
<li class="li_nc"><a href="#" >General Info</a></li>
<li class="li_nc"><a href="#" >License</a></li>
</ul></li>
<li class="li_nc"><a href="#" >Buy Now</a></li>
</ul></li>
<li class="li_nc"><a href="#" target="_self" >Product 2</a></li>
<li class="li_nc"><a href="#" target="_self" >Product 3</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>
<li class="li_nc"><a href="#" >More</a></li>
<li class="li_nc"><a href="#" >Test</a></li>
</ul>
</div>
<!-- END OF PULL DOWN MENU -->
<div style="float:left;padding-left:15px;"><p> </p><br />
<p> </p>
</div></body>
</html>
The first important thing above is the line where we attach the "style.css" file to the page. We do that inside the <head> part of the html file (if you are not sure how that works, just copy and paste the code in red above between the <head> and </head> tags on the target page (where the menu will live). Do not forget that you must put the "style.css" file in the same folder with the html page. In case you already have the same name used for another css file, rename this one and change the href to point to the new name.
The other piece of code we need to put into the target file is the menu structure (colored in green above). You should put this inside the <body> of the page, right where the menu should be positioned (usually -- the left sidebar, if we speak about that particular vertical menu example)
4.2. All files (style.css, csshover.htc and the two images) must be added in the same folder where your target page is located. Usually you just need to copy/paste all of these into the target folder. Remember to keep the exact directory structure (the images must be placed in the same subfolders as they are in the "template" exported by css menu generator, in our example both image files must be placed in "images/buttons/"
4.3. The css file for the menu comes with some color defined for the "body" tag. In some cases that could make your target page to look odd (for example, if you don't want that color defined for page background. To remove this -- open the "style.css" with your text editor and delete the "background-color" line inside the body { ... } selector. Note also that in the same section is defined the link to the csshover2.htc file
4.4. When you are ready, please, do not forget to upload all the support files to the web hosting server (otherwise your menu will work only when opened from your local disk).
There is another step-by-step example on how to add the menu to your target page here:
[ back to top ]