Search code examples
csshtmlwebframes

website menu navigation: div instead frames (html5, css)


I made websites years ago with html and frames. Now I could see all modern pages are using html5 with css (div). I already know how to make a nice website DESIGN, but I am struggling with the navigation on a website.

Lets say I have a website index.html with 2 divs (div navigation and div content).

When I click on a link in the menu bar (div navigation) the href is another .html file. Fore example I have a link to about.html.

Is the about.html a copy of index.html, just with another text in the div content? So the menu is build again?

This would mean for every side I have to copy the index.html and re-write the div content part. And the div navigation part will always be the same?

I am really struggling with the idea to have the menu bar on every single file every time again, instead the old frame-style, if this is how it is used.


Solution

    1. You can store you navigation in a single file like my_awesome_menu.php and use include 'my_awesome_menu.php'; in every page of your website. When you add new items in my_awesome_menu.php the changes will take place at all your pages. It will work only if you have server running. It won't work on your desktop like it was with html files, because there will be nobody to execute php files.
    2. You should store all styles in an external .css file or files. It's easy to maintain and you can get significant benefit because browser will cache styles once it would be downloaded. It means when user will open second page he won't load CSS again, he will load only HTML of this particular page.