Learning Report 5
This is my 5th Learning Report that I have done so far.
CSS Tabbed Navigation
Something that I wanted from the very beginning was the chance to place a tabbed navigation bar underneath my header. Up to this point I did not know how. I learned about about using images and I even did an entire learning report on menu buttons using CSS. But now I wanted to learn how to make the tabs.
Source
Overview
I figured out how to make the design of the menu bar using a past learning report but I was having trouble figuring out how to make it change when a certain page of my website was the 'active' website. I found a lot about using .active but it mainly dealt with images and such and I could not really get it to work. I then found on SohTonaka a way to do it using classes.
What you do is place a class in each of the bodies that you want to define as one of the active pages. Meaning for home you define as a the 'home' class. And the contact pages as the 'contact' class. This will help when you are trying to focus on a certain page. You also then have to difine each link as a class as well. It seemed to work really well for me.
Implementation
As you can see my main navigation that I got it to work. And I think it really adds to my web site. Here is the code I used to make the tabs.
<body class="home"> - Place this in the page that would like to considered active when you are home for example.
<li class="home"><a href="/index.shtml" title="Home Page for ShaunHutchings.com by Shaun Hutchings" >Home</a></li>
<li class="personal"><a href="/personal/permain.shtml" title="Personal Page for ShaunHutchings.com by Shaun Hutchings" > Personal</a></li>
- Use this in the navigation
Then use the following code in your CSS and presto, you got a tabbed CSS menu bar.
#home li.home a,
#personal li.personal a,
#pro li.pro a,
#contact li.contact a
{
background-color:#2d1300;
border-color:#2E5417;
color:#FFFFFF;
cursor:default;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: hidden;
border-top-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
}
