CSS Menu - Help

Step-by-step Example

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

1. Open CSS Menu Generator and select menu template:
   
   
   
   There is no much to do on this first step ("Select Template" tab) -- just select some of the templates from the top-left list and click "Customize" button. (Naturally, you may want to read the template info, right below the selection list, but now we are rushing so we will skip the reading). In this example we will use "CSS Vertical Drop down Plus" menu...
   
   
2. After clicking the "Customize" button, we will go directly to the next major step: "2) Customize". There are a lot of customization options (colors, fonts, images and so on) but all of them are documented inside the program itself (just click the nearest "Help" button to every respective option). In this example we will make only two changes -- the background images and the menu structure.
   
   2.1. To change menu background images -- click on the "Images" tab, then select "Menu Background" from the list in the left side and choose the image (in our case -- "white_bl_big.jpg")
   
   
   
   and we will select an image for the sub-menus too (white_ma_big.jpg):
   
   
   
   Note that not all menu versions include images -- only the so called "plus" versions. For the standard menus -- there are no images to select here.
   
   2.2. Now, let's create the menu links themselves. Click "Menu" tab to open menu editor, select "Main Menu" from the list then use Add / Edit / Delete buttons to create the menu structure:
   
   
   
   (In the above screen shot we used the "Edit" button to change the "Products" link to point to "my_target_page.html". Use the "help" button in the program itself to get more on the editing features here...)
   
   When the menu structure is ready, we can proceed to the next step:
   
   
3. Get the files: we will export here all the files required for the menu.
   
   
   
   In the left part of the screen, in the "Template Files:" list we can see all the files needed by our new menu. In our example, the menu we are building consists of 5 files:
   
   
   
   - the csshover2.htc file is the behavior file that makes IE6 able to properly show the popup menus (we will need this file if we want backward compatibility with IE6)
   - the two images are the background images we selected on the previous step. They must be uploaded to the remote server too if we want to get the menu working (again: not all menu templates will need images, but if there are images, you must upload them to the remote server too, along with the other support files)
   - style.css file contains the whole css code for the menu (the menu just will not work without that code)
   - at the end, there is an "index.html" file which is nothing but simple example on how to integrate your menu to your target pages (we will look on this in the next step)
   
   

    

   
   Now, in the right side of the screen, navigate to some temp folder (you can create new directory directly within the program -- just use the "Create and Open Folder" option). In the screenshot below we are about to create new "MyTempFolder" directory within "My Documents":
   
   
   
   Double-click to enter the new folder:
   
   
   
   Now, we are ready to export the template. To do that, just click the big "Export" button (right under the file list)
   
   
   
   and all the files will be saved in the target folder: CSS Menu Generator will create a sub folder called "template" and inside that sub folder you'll find all the files required for the menu to work plus the index.html example.
   
   
   
   And that's all CSS Menu Generator can do so far. The last step, adding the menu to your page, must be done by hand.
   
   
4. Adding menu to your target page

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>&nbsp;</p><br />
 <p>&nbsp;</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:

Adding CSS Menu to your HTML page

[ back to top ]