A Lower Opacity Black Background Navigation Bar

I would like to share about how to create a navigation bar using css. I will create the navigation with a lower opacity black background.

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

Show and Hide Sub Menu

Currently, I have just finished my auction website project, www.allcanbid.com. That's why I didn't write for a while.

I will explain how to hide and show a sub menu.

First of all, we need the style(CSS).

/* set no underline for a tag in container class */
.container > a{
    text-decoration: none;
}

/* set display to none for a slider class in container class */
.container > .slider{
    display: none;
}

After that we need a javascript function to determine whether to show or hide the sub menu when an user click the menu.

function slide(obj){

// Check whether the obj display is none or empty
    if(document.getElementById(obj).style.display == "none")
       document.getElementById(obj).style.display = "block"; // show the sub menu
    else
        document.getElementById(obj).style.display = "none"; // hide the sub menu
}

Here is the html that is inserted in the body tag.

<div id="container_1" class="container">
    <a href="javascript:void(slide('slider_1'))">Menu 1</a>
    <div id="slider_1" class="slider">
        <div id="slider_1_1">Sub Menu 1_1</div>
        <div id="slider_1_2">Sub Menu 1_2</div>
    </div>
</div>

<div id="container_2" class="container">
    <a href="javascript:void(slide('slider_2'))">Menu 2</a>
    <div id="slider_2" class="slider">
        <div id="slider_2_1">Sub Menu 2_1</div>
        <div id="slider_2_2">Sub Menu 2_2</div>
    </div>
</div>

That's it. :-)

Result Page

Custom TextField (Usually Use As Search TextField)

Currently i am learning how to design a webpage. I just created a custom textfield which people usually use as search textfield.

First of all we need to set the css

.custom-texfield-container{
background:url(img/search.gif); /* the image */
width: 150px; /* width of the custom-texfield-container */
height:40px; /* height of the custom-texfield-container */
margin:0; /* don't change this */
}

/* set the padding to fit the image */
.custom-texfield-container div{
margin-top:-3px;/* use to fit for all browsers */
padding-top:11px;
padding-right:19px;
padding-left:20px;
}

.custom-texfield-container div input{
width:110px;
height:15px;
border-top:0px;
border-bottom:0px;
border-left:0px;
border-right:0px;
}

Then put this in the body tag



Here is the image


Result Page

Let's Discuss it..
Comment or suggestion will be thankful..