How to integrate the links and menu in CSS?

Question

I am working on a personal website and I have downloaded a free CSS template. I am somewhat familiar with CSS (its been a few years) but need help integrating the side menu bar and top menu bar in the style sheet so I don't have to change them manually on every page.

Any help is greatly appreciated!

Answer 1

Hi,



If you make the menu files as external files & want to include them on every page so any change in the menu file occur on all pages, you don't need CSS for that all you need is SERVER SIDE INCLUDES.



If you are using a server side language, lets say PHP or ASP, you can do so by following steps...



1- Put the whole menu code in a new file & save that. Then back on the main page, use the below code to include the external file...



IF YOU ARE USING PHP

?





IF YOU ARE USING ASP





Regards,

Muhammad Uzair Usman

Creative Web2.0 Website Designer

http://www.uzairusman.com

Answer 2

I'm not sure it's possible to do this just using CSS - someone else may prove me wrong - because CSS is for styling not content.



What I did was to use an iframe and a lot of CSS to produce my menu. The menu is actually just a plain HTML page controlled through CSS and JavaScript and a link to it placed on every page - the effect is that I just have to update the one menu page.



For details see http://brisray.com/utils/umenu.htm



I'm now thinking of changing it again so the menu is written just using CSS and JavaScript.

Answer 3

Did you mean use the same style for side menu bar and top menu bar in every web pages?



Add the tag to every pages:





Define an id for your menu bars, e.g.

The top menu bar

The side menu bar

You will only need to add some id selector in the css file like this:

#topnav { background-color: #00FF00; }

#sidenav { background-color: #FF0000; }



Modify only the css file will change all the pages. So, you don't need to modify all the pages one-by-one.