Create Pure Css3 Horizontal Navigation Menu Bar with 2 steps

Create Css3 Horizontal Navigation Menu Bar with 2 steps

The Navigation is very important component of  User Interface in web Design & Web Development process. The main aim of navigation menu is to access the content or complete the task as quickly as possible in any website or any web app.

In this post i am demonstrating the simple Horizontal Navigation Menu with simple HTML structure and CSS. Below are the steps to develop simple Horizontal Navigation menu with CSS3 transitions feature.

I said Navigation menu component in my first para because if you see each section in web design and development as a component then u will be think expert way and go in details of each section of web design and development.

Step 1. Create the html markup as we do for any menu component. I took one div with id 'container', this id name you can choose as per your choice and unorder list . The below markup as image  to your html after add it after opening  tag of . section.  

Step 2. Create CSS style to apply above html markup.

body{
margin:0px; /*  reset*/
padding:0px;/*  reset*/
}

#container{
position:relative;
padding:20px 10px;
}

ul{
  margin:0px;
  padding:0px;
  border:0px;
  list-style-type: none;
  height:30px
}

ul li{
 float:left;
 display:list-item;
}

ul li a{
  text-decoration:none;
  color:#fff;
  font-family:Arial;
  background-color:#000;
  padding:12px;
  text-transform: uppercase;
}

ul li a:hover{
  text-decoration:none;
  color:#fff;
  font-family:arial;
  background-color:#F00;
  padding:12px 12px 30px 12px;
  transition:all 0.4s ease-in-out;
}

ul li a.active{
 padding:12px 12px 30px 12px;
 background-color:#98bf21;
}

you can copy the above css and paste directly after section with

The above style declaration is one of the css declaration type. There are 3 types of CSS Styles. The above one is  Internal/Embedded styles and other two are Inline styles and External Styles.

In above CSS declartions i used only one CSS3 features that is CSS3 Transitions features.
 transition:all 0.4s ease-in-out;  

And finally the code outcome is as below.

here is live example of above post on Codepen.

http://codepen.io/nandu/full/fkiJn

Cheers!