Adding a CSS menu to a frames-based layout can be tricky, especially if you're not familiar with the way frames are structured. If you're new to HTML or unsure of your ability to use frames properly, you may want to check out this article on HTML Code Tutorial: Frames Tutorial.
The key issue here is consistency in using and naming your frame "name" values. (If this last sentence was intimidating, it's not too late to read this great tutorial!)
For simplicity's sake, we will outline the use of the CSS Menu Designer in a two-frame horizontal page. But first, we have to set up the webpages that we'll use in the frames.
First, create your homepage, and name it main.html. Next, create a new webpage and save it as menu.html. Add your CSS menu code to the page, and then take a look at the HTML it inserts between the <body></body> tags. You'll see a number of links. Add the following attribute after the href="page.html" bit: target="main". So now your links will look something like this:
<a href="page.html" target="main">Menu Item Text</a>
Next, in a new document, create a frameset that looks like this:
</head> <frameset rows="20%,*" border="0"> <frame name="navigation" src="menu.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0" noresize> <frame name="main" src="main.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <noframes> <body> </body> </noframes> </frameset>
You'll notice that menu.html is linked to in the navigation frame and main.html is linked to in the main target frame. This means that links from the navigation frame will open in the main frame.
Rate This Article
You must be signed in to rate articles.
