If you want to create your CSS menu, and use it for several pages without doing a copy and paste to each page, here is how it can be done.
READ ALL INSTRUCTIONS before starting.
1. You will need to know what server-side language your host provides for your website. You may need to change the names of your web pages.
2. Now is a good time to select a name for your menu related files. The file name should not have any blanks, and remember that case matters, and My-menu is not the same as my-menu. I suggest you use all lower case, and if you must have seperators between the words, use a - as in my-menu or a _ as in my_menu. I tend to use menu file names that tell me which site the menu should be on, such as fbc-gc-menu.mnu or bdc-menu.mnu. For this example, I will use my-menu.xxx for file names.
3. Start a "New Blank Page", save this file as my-menu.html. Place the cursor between the <body> tag and the </body> tag of the my-menu.html. Click on "Insert" and click on "CSS Menu Designer ..." and allow the menu designer to open. First look on the right side and locate the box named "Menu name:" and in that box, enter my-menu. Now, build your menu and test it until you have what you want. Be sure to save the menu .mnu file. At this point, click on "OK" click on "OK" and click on "Save" to place your menu code in the my-menu.html file. Save this file. Keep the my-menu.html file open.
4. If you are not using a server-side program, this is a good time to start. You will need at lease two files that are used as server-side files for the CSS Menu. You will need one file for the head of your pages, and a second for the body of your pages. Look at the code now in your my-menu.html file, and notice that just above the </head> tag is a <link rel="stylesheet" type="text/css" href="css/my-menu-menu.css" media="screen">. This line belongs in your head server-side file. The second file will include everything between the <body> tag and the </body> tag. The server-side file names for the head and body of your pages will depend on which server-side program you are using.
5. For PHP, save the files as head.php and my-menu.php.
In the head of all your pages, you add a line of code that reads <?php include("head.php"); ?>
In the body at the location for your menu, you will use code that reads <?php include("my-menu.php"); ?>
You will need to make all your web pages end with a php instead of html. index.php, about.php, everything.php, etc.
For ASP, save the files as head.inc and menu.inc.
In the head of all your pages, you add a line of code that reads <!--#include virtual="head.inc"-->
In the body at the location for your menu, you will use code that reads <!--#include virtual="my-menu.inc"-->
For help with getting your CSS menu to work as a single file, post a message in the CoffeeCup forums.
For other server-side assistance, check the W3Schools site: http://www.w3schools.com/sitemap/sitemap_tutorials.asp
Using a single copy of the CSS menu
BillR
Ambassador
3,144 posts
CoffeeCup Software Rocks!
Registered User
851 posts
Nice work and valuable information. This should help a lot of people.
Dave.
Dave.
Sharon
Registered User
16 posts
Thanks for this help, I have been trying to get this done for days.... I am still not happy with the way the thing looks because I want everything to center on the page, and this menu refuses to do it for me.
BTW, I found that, following the instructions here, I also had to upload the menu-menu.css to a sub-directory called css in order for all this to work. It did not work from the root directory. I made about a thousand trial and error uploads, because no way to preview from the hard drive, is that right?
My site is thechristiancompass.com and I am trying to reorganize it with some of the improvements offered by the CC suite, and use SSI for the menu, etc.
Sharon
BTW, I found that, following the instructions here, I also had to upload the menu-menu.css to a sub-directory called css in order for all this to work. It did not work from the root directory. I made about a thousand trial and error uploads, because no way to preview from the hard drive, is that right?
My site is thechristiancompass.com and I am trying to reorganize it with some of the improvements offered by the CC suite, and use SSI for the menu, etc.
Sharon
Jo Rice
Senior Advisor
10,951 posts
Hiya Sharon,
You should be able to preview CSS Menus on your computer since it's not flash or anything scriptwise like that. CSS has a little known quirk though. When you change an "External" CSS file you 'Need' to save it before it will show the changes. This is not true of an internal <script>css code here</script> setup within your html pages themselves. When internal they do not need to be saved first to preview them.
As for the location of the file, that also can be changed if you don't want it inside a separate css folder, but it's a good idea to keep it separate so it's easier to find
You should be able to preview CSS Menus on your computer since it's not flash or anything scriptwise like that. CSS has a little known quirk though. When you change an "External" CSS file you 'Need' to save it before it will show the changes. This is not true of an internal <script>css code here</script> setup within your html pages themselves. When internal they do not need to be saved first to preview them.
As for the location of the file, that also can be changed if you don't want it inside a separate css folder, but it's a good idea to keep it separate so it's easier to find
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
