Mick Redman: vertical

Friday, 13 August 2010

Simple vertical navigation

How many times have you wanted to start a website using a simple left hand vertical left hand navigation and then just build on it. Below is a template for doing just that. This time I have added a few comments even though the code is pretty self explanatory. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
/* a holder for the entire page centred in the browser window */
#subSystem
{
margin:0 auto;
width:480px;
}
/* a container for the navigation with a border around 3 of the sides */
#subNav
{
float:left;
width:88px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
}
/* properties of each menu item to make it look like a block of centred text */
#subNav a.subMenu
{
display:block;
text-decoration: none;
text-align:center;
width:80px;
height:40px;
padding-top:16px;
padding-left:4px;
padding-right:4px;
color:#000000;
}
/* the changes in appearance of a menu item when someone hovers over it */
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
/* the changes in appearance of a menu item when someone has selected it */
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
/* a container for the page content */
#subContent
{
float:left;
width:380px;
min-height:380px;
height:380px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
/* when a menu item is clicked remove any items which were previously selected.
Change the property of the item clicked to selected.
Put whatever the hyperlink points to within the content container. */
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>