For my nav bar, I only had 3 pages so I wanted to make them interactive buttons for each page.

Here is the css and html for my nav bar. Like with the header, I will go through it and explain each bit:

This is the main nav container

<nav>

<div id=”nav1″>
Here is the text for each of my nav buttons. The font style gives the text a yellow background. <strong>Puts everything inside the tags as bold text in the html standard form.
<p><a href=”index.html”><strong><font style=”background-color:#CF0;”>HOME</font></strong></a></p>
</div>

<div id=”nav2″>
<p><a href=”location.html”><strong><font style=”background-color:white;”>LOCATION</font></strong></a></p>
</div>

<div id=”nav3″>
<p><a href=”events.html”><strong><font style=”background-color:white;”>EVENTS</font></strong></a></p>
</div>

</nav>

nav{

The dimensions of the nav bar holder match the container for width, and the height will stretch depending on the size of the navigation buttons
max-width:960px;
width:100%;
height:auto;

The background colour of the nav bar is set at black, but I think that the nav buttons cover this completely so you’ll never see the background
background-color:#000;
color:#FFF;

I have set the margin underneath the nav bar to 30px, so that anything underneath the div will leave a 30px gap between them. I prefer to have the margin just at the bottom to deal with things like this as it means the margin will not affect my positioning at all.
margin-bottom:30px;

1.3em is basially responsive text at 1.3 times the standard text size. I’ve chosen Verdana as my font-family, and I’ve set text-align to center here so that all of the divs inside agree to these rules.
font-size:1.3em;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}

I’ve just taken one nav button as an example, as all 3 are the same (bar one or two differences) and will have the same css

#nav1{

I have set the width of this and nav3 to 300 pixels, and the width of nav2 to 360 pixels. I tried doing 33.333333…%, but it kept coming out wrong, so I thought it was better to use a bigger one for the middle as it was a igger page title anyway! The height is auto as it will alter based on text size and position. 
max-width:400px;
width: 31.25%; /* 300 (originally 300) / 960 */
height:auto;
Float is left on 1 and 2 and right on 3 so that they sit on the same level.
float:left;
This keeps padding and borders inside the specified width.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
These are the rules for the border, except these are outlined in yellow rather than black to make them stand out
border-style:solid;
border-width:2px;
border-color:yellow;

This background is the background of the button and the one that will move when hovered over (rules below) I’ve used a picture of a chequered flag as the background. Overflow is set at hidden because you can’t see the whole image, just the piece that’s cut inside the nav button.
background:url(../images/buttonbg.jpg);
background-position: 0 0;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
overflow: hidden;
display: block;
text-align: center;

Border radius settings, giving each button a curved corner of 5px
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Although barely noticeable, there is a shadow on each box spread out by 3px and 1px.
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

This is to do with the css3 background transition, meaning it will take 0.8s for all transitional movements to complete. 
-webkit-transition: All 0.8s ease;
-moz-transition: All 0.8s ease;
-o-transition: All 0.8s ease;
-ms-transition: All 0.8s ease;
transition: All 0.8s ease;
}

This is not a div, but it denotes a rule when you hover over the div. There is a rule for this on each nav button.
#nav1:hover{

This basically means that when I hover over the button, the background will shift on the y axis by 150px, This is what gives the moving effect on the button
background-position: 0 150px;
}

here is what it looks like with these in place:

nav

Advertisements