CSS Menu Help

CSS Menu Generator - HELP

for more info on how to use CSS Menu Generator -- read below...

Overview
Download
Help Info
- Add menu to your page
FAQ
Version History

Adding the CSS menu to your page

To add the menu to your page you must do the following:

Add the css file to your site. If you used the "generate" button to export the required files into "template", just copy the "style.css" file into the same folder of your site where the target html page is located. Or you can do it manually by selecting "CSS Code" from the "HTML/CSS Code" tab

Click "Copy to clipboard" button if you want to get the code only or use "Save File" button to directly save the file into your site's target folder.
Open the target page (where you want the menu to be added) and link the css code you previously saved into the head section of the target file. If you saved the css file as "style.css", put the following code just before the closing </HEAD> tag:

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

      

      <meta http-equiv="X-UA-Compatible" content="IE=8" />

      

      <link rel="stylesheet" type="text/css" media="screen,projection" href="/style.css" />

   </head>

<body>

3. Now, go and get the menu itself. You can get it from the "index.html" file in the generated "template" or, if you prefer to use directly the code from CSS Menu Generator, go to the "XHTML Code" tab, select the menu code and click "Ctrl+C":

Now go and paste this code on the target page (must be where you want the menu to be placed but in the body section of your document)

4. Now go and save the csshover file in the same folder where the css and html files are located. Remember, in this example we put all files in one place (the folder where our target html page resides)

5. Upload the modified html page, the css file and the hover file to your server.

Note that you may want to place the css file and the csshover file in different place than the folder where your target html page is located (for example, if many pages in different folders must share the same css). In such case you must modify the "link" line (in the head part of the document, where we add the css file to the page) and one line in the css file itself (to point the css code to the real place where csshover2 file is located). For example, if we placed the style.css and csshover2.htc files inside the /menucode/ folder of our site, we will change the files as follows:

(a) the css linking into the html file must point to the right path:

<head>

...



<meta http-equiv="X-UA-Compatible" content="IE=8" />



<link rel="stylesheet" type="text/css" media="screen,projection" href="/menucode/style.css" />

...

</head>

(b) You must also change line 9 of the css file (style.css in our example) to reflect the csshover2.htc file position:

...

body {
background-color: #ffffff;

/* for pull-down menu to work in IE6*/
behavior:url("/menucode/csshover2.htc");

}

...

And again: do not forget to upload the files to the real server ;-)

[ back to top ]