CSS3 and html5 Flashy Menu

DOWNLOAD
we'll going to show you how to create a flashy menu using CSS3. This tutorial is for beginners and can be completed fairly quickly. Make sure you click on the link below to see a demo of the menu and get the source code.

The HTML

Our HTML document contains an unordered list and each list item is a link with an anchor tag. The span contains the name of the menu item.
<ul class="main-ul">
         <li><a href="#"><span>Home</span></a></li>
         <li><a href="#"><span>Article</span></a></li>
         <li><a href="#"><span>Blog</span></a></li>
         <li><a href="#"><span>Gallery</span></a></li>
         <li><a href="#"><span>About</span></a></li>
         <li><a href="#"><span>Contact Us</span></a></li>
         <li><a href="#"><span>Alumini</span></a></li>
         <li><a href="#"><span>Portfolio</span></a></li>
 </ul>

The CSS



I am using a pattern for our page background from SubtlePatterns.


body{
 background: #eee url(../images/white_paperboard.png) repeat top right;
}

Now let’s position menu list items. I am using 25% width for each item, so in each row four menu items can be positioned. I’m aligning text of each list item to center.

.main-ul li {
   float:left;
     position:relative;
      width:25%;
     text-align:center;
  }

Next let’s position each anchor tag and change text decoration to none. I am using a light gray color background. I am also adding CSS3 transition effects to these elements with a duration of one second.

.main-ul li a {
                      display:block;
     padding-bottom:20px;
     padding-right:10px;
     padding-top:10px;
     padding-left:10px;
      text-decoration:none;
     position: relative;
      z-index: 100;
     background-color: rgba(164, 164, 164, 0.2);
      -webkit-transition: all 1s;
     -moz-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
   }

Read more:http://designfestival.com/how-to-create-a-flashy-menu-using-css/



Labels: