February 10th, 2019 at 7:20 PM
Seeing as there have been a few template's I figured I might as well share a basic version of the site design I came up with most recently since it not only has a unified page menu but only uses HTML and CSS!
this should be the index .html
your home page.html file name/location should be put where home.html is.
your navigational menu should be placed where menu.html is
finally if you change cols to rows you can have your menu on top or below your main page so it's very flexible for a basic design.
this is the menu code I use.
the target is set to main to go with the above html, so long as your target in this page matches the name of the frame you want it to show up in any link you setup this way will load in that sub frame specifically thus keeping your menu intact, and your visitors never actually leave your primary page. as for the main page, you can put whatever there because it will change depending on what option they click on the menu, just make sure you set your initial page to the one you want the site to load first on your index.html and "home" buttons.
as for the table, I find this makes a very nice menu that works on just about every device with a graphical web browser, you can set the class to customize the look and feel using CSS the same way you use buttons
I like to use a separate CSS file for just the menu so I can design it without affecting the rest of the site.
and finally this bit allows you to use a custom font for menus thus avoiding the need to use images for menu buttons and allowing the site to load that much faster.
I've gone ahead and taken a screenshot that shows how it looks put together with a VERY rudimentary home page, colored so you can see how it separates the menu from the main page.
It's very basic but it works!
![[Image: lRSsrxI.png]](https://i.imgur.com/lRSsrxI.png)
and the best part?
the frame rows and columns, you can have as many as you want, have different links go to different pages, and all sorts of stuff, so if you want say a 3 column page layout, you can totally do so.
should work great for blogs too.
anyway hope this helps someone out there lol, it took me 6 months to work out!
this should be the index .html
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<frameset cols="200px,*" frameborder="0" border="0">
<frame src="menu.html" name="nav">
<frame src="home.html" name="main">
</frameset>
<body bgcolor="#ffffff">
</body>
</html>your home page.html file name/location should be put where home.html is.
your navigational menu should be placed where menu.html is
finally if you change cols to rows you can have your menu on top or below your main page so it's very flexible for a basic design.
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="menu.css">
</head>
<body bgcolor="#ffffff">
<center>
<table class="custom menu class here" cellspacing="0" cellpadding="0" border="0"><tbody>
<tr><td><center><a href="home.html" target="main">Home</a></center></td></tr>
<tr><td><center><a href="item1.html" target="main">item1</a></center></td></tr>
<tr><td><center><a href="item2.html" target="main">item2</a></center></td></tr>
</tbody></table>
</center>
</body>
</html>this is the menu code I use.
the target is set to main to go with the above html, so long as your target in this page matches the name of the frame you want it to show up in any link you setup this way will load in that sub frame specifically thus keeping your menu intact, and your visitors never actually leave your primary page. as for the main page, you can put whatever there because it will change depending on what option they click on the menu, just make sure you set your initial page to the one you want the site to load first on your index.html and "home" buttons.
as for the table, I find this makes a very nice menu that works on just about every device with a graphical web browser, you can set the class to customize the look and feel using CSS the same way you use buttons
I like to use a separate CSS file for just the menu so I can design it without affecting the rest of the site.
Code:
/*menu font */
@font-face {
font-family: familyhere;
src: url('fontfile');
}and finally this bit allows you to use a custom font for menus thus avoiding the need to use images for menu buttons and allowing the site to load that much faster.
I've gone ahead and taken a screenshot that shows how it looks put together with a VERY rudimentary home page, colored so you can see how it separates the menu from the main page.
It's very basic but it works!
and the best part?
the frame rows and columns, you can have as many as you want, have different links go to different pages, and all sorts of stuff, so if you want say a 3 column page layout, you can totally do so.
should work great for blogs too.
anyway hope this helps someone out there lol, it took me 6 months to work out!
"I reject your reality and subsitute my own." - Adam Savage, Mythbusters
![[Image: 5.jpg]](http://www.nodiatis.com/pub/5.jpg)
