I thought I would pass it on to you guys. It involves the use of a javascript library called Jquery. The tool will let you build a theme for your site. This includes color layouts, toolbars, navigation elements, tool tips, etc.. http://jqueryui.com/themeroller/ Once you design the layout it will let you download your custom .css layout I have only had a little while to play with it.
But here is a link to a page with a navigation bar installed on it.
http://dev.contacker.com/dev_tabbed.html
The effect is the navigation bar that is loading its contents from other html pages when you click on the tab.
The elements creating this effect in the html is as follows.
Include in your header to include the stylesheet and jquery elements.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> <link href="css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" src="javascript/jquery.corner.js"></script> <script type="text/javascript" src="javascript/jquery.dimensions.js"></script>
Include in your header to activate the jquery tabs effect
<script type="text/javascript">
$(function() {
$("#tabs").tabs({ remote: true });
});
</script>
HTML code for the tabs
<div id="tabs"> <l> <li><a href="content_elements/contact.html" title="contact"><span>contact</span></a></li> <li><a href="content_elements/blog.html" title="blog"><span>blog</span></a></li> <li><a href="content_elements/register.html" title="register"><span>register</span></a></li> </ul> </div>
Note when you actually click on the links above jquery loads the external page under the tab. This can allow you to build navigation menus that do not require the page to be load just the single element that is changing.
There is of course a ton of different ways to do the same thing but this one was pretty quick and hardly any code..