First of all we need to create the container of our navigation.
#navigation_container{
position: absolute;
width: 500px;
height: 40px;
/* create a centered container */
left: 50%;
margin-left: -250px;
/* -- END -- */
}
Then we need the black background.
#navigation_black{
position: absolute;
width: 100%;
height: 100%;
background-color: BLACK;
z-index: -1; /* set the layer of the container to be lower than other layer */
}
In order to modify the black background to have a lower opacity, we need this css class.
.reduce_opacity{
filter:alpha(opacity=50); /* for IE */
-moz-opacity:0.5; /* for Firefox */
opacity:0.5; /* standard CSS */
-khtml-opacity:0.5; /* for Safari */
}
For the navigation elements, we need a container to centered all the elements in the navigation_container.
#navigation_inner_container{
position: absolute;
height: 100%;
left: 50%;
margin-left: -190px;
}
We will use the hyperlink as the navigation elements. So I change a little properties of the hyperlink tag. I also add a class for the hyperlink.
a{
text-decoration: none;
}
.navigation_element{
float: left;
height: 20px;
line-height: 20px;
padding: 5px;
margin: 5px;
color: WHITE;
}
/* change the background and color of the hyperlink if the cursor is over the hyperlink */
a.navigation_element:hover{
background-color: WHITE;
color: BLACK;
}
This is the html that is inserted in the html.
<div id="navigation_container">
<div id="navigation_black" class="reduce_opacity"></div>
<div id="navigation_inner_container">
<a class="navigation_element" href="">Home</a>
<a class="navigation_element" href="">Product</a>
<a class="navigation_element" href="">Our Client</a>
<a class="navigation_element" href="">About Us</a>
<a class="navigation_element" href="">Contact Us</a>
</div>
</div>
Here is the result page.
Lower Opacity Black Background Navigation Bar
