Devtorial

by **Ozzy** » Fri May 08, 2009 7:37 pm

Introduction
This tutorial was requested by a friend, Dan, who runs Football Forever. What he wanted was to do was modify the current banner to make the navigation menu transparent and appear over the header banner. Heres how it currently looks:

And here is how he wants it to look:

So Whats The Solution?
Well for this particular effect, there are many ways it can be achieved. The two most common methods that come to mind are:

Relative Positioning
Absolute Positioning

For this tutorial I will be focusing on relative positioning as it is the easiest to implement and more hassle free then absolute positioning. Before we start though, we must first rewrite the original header HTML code to allow for easier relative positioning. Here is the code after a rewrite:

Code: Select all: <div id="headerwrapper"> <div id="logostrip"> <a href="http://football...91bba4b0acbc"> <img src="style_images/safc1235510362/logoV3.png" style="vertical-align;top:55px;left:320px" alt="Random logo image... Refresh for more!" border="0" /> </a> </div> <div id="submenu"> <div id="top_nav"> <ul> <li><a href="http://www.foot...ndex.php?" title="Home"><span>Home</span></a></li> <li><a href="http://football...forum=124" title="FF Manager"><span>FF Manager</span></a></li> <li><a href="http://www.foot...om=bookie" title="Bookies"><span>Bookies</span></a></li> <li><a href="http://www.foot...=calendar" title="View The Calender"><span>Calendar</span></a></li> <li><a href="http://www.foot...t=Members" title="Members List"><span>Members</span></a></li> <li><a href="http://www.face...688600582" title="Check Out Our FaceBook Page!"><span>Facebook</span></a></li> <li><a href="http://football...P&CODE=00" id="ipb-tl-search" title="My Controls"><span>Control Panel</span></a></li> <li><a href="http://football...g&CODE=01" title="Messages"><span>Messages</span></a></li> <li><a href="http://www.foot...h&f=0" id="ipb-tl-search" title="Search"><span>Search</span></a></li> <li><a href="mailto:mail@foo...ect=Hello" id="ipb-tl-search" title="Contact Us"><span>Contact Us</span></a></li> </ul> </div> </div> </div>

To make for easier reading, I have cleaned up the code a bit and shortened some links so its easier to follow. Now that we have the code, we can start to create the navigation bar.

Relative Positioning
Relative positioning is a way in which you can position an element based on its parents coordinates. To use relative positioning in this situation, we would need to rewrite the header HTML to make it easier for ourselves. Here is the rewritten code:

Code: Select all: <div id="headerwrapper"> <div id="logostrip"> <a href="http://football...91bba4b0acbc"> <img src="style_images/safc1235510362/logoV3.png" style="vertical-align;top:55px;left:320px" alt="Random logo image... Refresh for more!" border="0" /> </a> <div id="top_nav"> <ul> <li><a href="http://www.foot...ndex.php?" title="Home"><span>Home</span></a></li> <li><a href="http://football...forum=124" title="FF Manager"><span>FF Manager</span></a></li> <li><a href="http://www.foot...om=bookie" title="Bookies"><span>Bookies</span></a></li> <li><a href="http://www.foot...=calendar" title="View The Calender"><span>Calendar</span></a></li> <li><a href="http://www.foot...t=Members" title="Members List"><span>Members</span></a></li> <li><a href="http://www.face...688600582" title="Check Out Our FaceBook Page!"><span>Facebook</span></a></li> <li><a href="http://football...P&CODE=00" id="ipb-tl-search" title="My Controls"><span>Control Panel</span></a></li> <li><a href="http://football...g&CODE=01" title="Messages"><span>Messages</span></a></li> <li><a href="http://www.foot...h&f=0" id="ipb-tl-search" title="Search"><span>Search</span></a></li> <li><a href="mailto:mail@foo...ect=Hello" id="ipb-tl-search" title="Contact Us"><span>Contact Us</span></a></li> </ul> </div> </div> </div>

Its almost exactly the same except the submenu div is removed and the top_nav div is now within the logostrip div. Now that we have the code sorted, heres a diagram to explain how relative positioning would work in our case:

So now that we have a rough guide of what do to, lets dive into some CSS. We have two main identifiers that we will modify the CSS of:

#top_nav
#logostrip

I will post the finished CSS code here and explain it bit by bit. First the #top_nav class:

Code: Select all: #top_nav { position:relative; line-height:2.3em; top:0.4em; border:0 !important; background:#000000; opacity:0.5; filter:alpha(opacity=50); margin:5px; }

Now lets go through that line by line.

This line starts the #top_nav class.

Code: Select all: #top_nav {

We now set the position to relative. This allows us to use properties such as top and left.

Code: Select all: position:relative;

Although not necessarily needed, this makes the height of the navigation bar a bit bigger then it currently is. Its there purely for aesthetic reasons.

Code: Select all: line-height:2.3em;

This code is important. What is does is it moves the #top_nav div down by 0.4 em. 1 em being the text size of the parent element. You may wonder why were moving the bar down instead of up to cover the banner. I will get to that later on.

Code: Select all: top:0.4em;

This removes the current navigation border (a white border on top) so that the bar looks better. The !important rule tells the browser that this property overrides anything set before or after it that modifies the border of #top_nav.

Code: Select all: border:0 !important;

When dealing with menus that have opacity, its a good idea to have black as a background colour (not always but in this case black is a good colour to use). Black can also be expressed in hex as #000000 which is rgb(0,0,0).

Code: Select all: background:#000000;

Here we set the opacity (transparentness) of the navigation bar. The first line is supported by most modern browsers while the second line is strictly for Internet Explorer. Because of the second line, the CSS will not validate.

Code: Select all: opacity:0.5; filter:alpha(opacity=50);

This code just makes sure the navigation fits with the header and doesn't over flow on the outside of the header image.

Code: Select all: margin:5px;

This line just closes the class.

Code: Select all: }

Now that I have explained the #top_nav class, lets see the #logostrip class.

Code: Select all: #logostrip { margin-bottom:-4em; }

This line starts the #logostrip class.

Code: Select all: #logostrip {

Here is where things get interesting. Remember when we modified the top attribute in the #top_nav class to push it down instead of up? This negative bottom margin will even this out.

Code: Select all: margin-bottom:-4em;

If your still confused, this picture should help clear things up:

And as before, this line closes the #logostrip class.

Code: Select all: }

So thats the code explained.

Wrap Things Up
So once we put all the code together, we have this neat bundle of joy:

Code: Select all: <style type="text/css">  </style> <div id="headerwrapper"> <div id="logostrip"><a href='http://football-forever.com/ipb/index.php?'><img src='style_images/safc1235510362/logoV6.png' style='vertical-align;top:55px;left:320px' alt='Random logo image... Refresh for more!' border='0' /></a></div> <div id="top_nav"> <ul> <li><a href="http://www.football-forever.com/forum/index.php?" title="Home"><span>Home</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?showforum=124" title="FF Manager"><span>FF Manager</span></a></li> <li><a href="http://www.football-forever.com/ipb/index.php?autocom=bookie" title="Bookies"><span>Bookies</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=calendar" title="View The Calender"><span>Calendar</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=Members" title="Members List"><span>Members</span></a></li> <li><a href="http://www.facebook.com/home.php?#/group.php?gid=12688600582" title="Check Out Our FaceBook Page!"><span>Facebook</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?act=UserCP&CODE=00" id="ipb-tl-search" title="My Controls"><span>Control Panel</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?act=Msg&CODE=01" title="Messages"><span>Messages</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=Search&f=0" id="ipb-tl-search" title="Search"><span>Search</span></a></li> <li><a href="mailto:mail@football-forever.com?subject=Hello" id="ipb-tl-search" title="Contact Us"><span>Contact Us</span></a></li> </ul> </div> </div>

So Dan, heres what you do. Replace this code in your header file:

Code: Select all: <div id="headerwrapper"> <div id="logostrip"><a href='http://football-forever.com/ipb/index.php?s=d689464c57a14aa3cc3f6f33bd05f109&'><img src='style_images/safc1235510362/logoV7.png' style='vertical-align;top:55px;left:320px' alt='Random logo image... Refresh for more!' border='0' /></a></div> </a> <div id="submenu"> <div id='top_nav'> <ul> <li><a href="http://www.football-forever.com/forum/index.php?" title="Home"><span>Home</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?showforum=124" title="FF Manager"><span>FF Manager</span></a></li> <li><a href="http://www.football-forever.com/ipb/index.php?autocom=bookie" title="Bookies"><span>Bookies</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=calendar" title="View The Calender"><span>Calendar</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=Members" title="Members List"><span>Members</span></span></a></li> <li><a href="http://www.facebook.com/home.php?#/group.php?gid=12688600582" title="Check Out Our FaceBook Page!"><span>Facebook</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?act=UserCP&CODE=00" id="ipb-tl-search" title="My Controls"><span>Control Panel</span></a></li> <li><a href="http://football-forever.com/ipb/index.php?act=Msg&CODE=01" title="Messages"><span>Messages</span></a></li> <li><a href="http://www.football-forever.com/forum/index.php?act=Search&f=0" id="ipb-tl-search" title="Search"><span>Search</span></a></li> <li><a href="mailto:mail@football-forever.com?subject=Hello" id="ipb-tl-search" title="Contact Us"><span>Contact Us</span></a></li> </ul> </div></div>

with the clean code that I posted just before. That will turn your current navigation into awsome transparent navigation. Here is a real before and after picture to show its awsomeness:

Useful Links
BrainJar: This is a useful article explaining css positioning
Mandarin Design: This article is pretty much everything you need to know about CSS opacity

Conclusion
This tutorial showed one way of making a transparent navigation bar. Because the code written here was designed for Dans website, Football Forever, it is not recommended that you copy and paste this code on your website. Its best to read it through and understand what I wrote and apply that knowledge to your navigation bar. In the future I will write a generic transparent navigation bar as well.

Ozzy

Devtorial

[MEDIUM] Transparent Bar

[MEDIUM] Transparent Bar

Who is online