Main Menu

© 2007  WebStudioHelp.net & SunsetFX.com          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.

Navigation

Testing some free CSS menus .....
-  The following examples are from various sites. To go to the site, click on the item name.
-  If you have a suggestion for other sites that offer this type of service, please use the Questions / Comments / Suggestions? link (above).
   Please note the type of item the message pertains to.

- You should note that most of the menu code from various sites use links that open in the same window. While that's fine for pages within your site, you may want to have external links open in a new window automatically. If so, you'll probably need to add a small piece of code after the link. Here is the most common form of opening a new window:

DynamicDrive.com ( CSS Horizontal Hover Menu)
- This is a simple copy / paste type of menu.
- You have the option of changing the link names and colors from within the code itself. I've added extra code to open the links in a new window:
- This example uses the colors that were already present in the code.

Code:
target="_blank"

So, the original link would be: <a href="http://www.cnn.com">CNN</a>

And the link to open in a new window would be: <a href="http://www.cnn.com" target="_blank">CNN</a>

Need more ways of opening a new window?  Check these links:
-  Open Links in New Window
-  Open Offsite Links in New Window
-  Open Select Links in New Window

Now for some of the examples .....

Maxdesign.com.au Listamatic   ( Cheap OSX)
- This is a simple copy / paste type of menu.
- You have the option of changing the link names and colors from within the code itself. I've added extra code to open the links in a new window.
- The CSS portion of the menu goes into an HTML Object - Inside Page Header. You'll also need to add the following before that code:
    <style type="text/css">  and this after it:  </style>
- The HTML portion of the code goes into the same HTML Object (just double-click to open it and paste there).
- For better viewing, I've made some changes to the code that you'll get if you download from the site:

Code:

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #fff;
}

#navlist
{
width: 90%;
text-align: center;
margin: 1 auto;
padding: 1;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 1;
margin: 1;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: 1px;
text-decoration: none;
color: #000;
font-size: .75em;
padding: 0 2px;
border-top: .5em solid #fff;
}

#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1em;
}

#navlist a#current { color: #fc6; }
- Here's the example:

DynamicDrive.com   ( CSS Menu Highlight)
- This is a simple copy / paste type of menu.
- You have the option of changing the link names and colors from within the code itself. I've added extra code to open the links in a new window.
- The CSS portion of the menu goes into an HTML Object - Inside Page Header.
- The HTML portion of the code goes into the same HTML Object (just double-click to open it and paste there).
- To allow you to see the menu on this page, I changed the mouse-over color to black (#000000).

DynamicDrive.com   ( CSS Tab Menu)
- This is a simple copy / paste type of menu.
- You have the option of changing the link names and colors from within the code itself. I've added extra code to open the links in a new window.
- The CSS portion of the menu goes into an HTML Object - Inside Page Header.
- The HTML portion of the code goes into the same HTML Object (just double-click to open it and paste there).

aaaaaaaaaaaaiii