Visitors Today: 207
Total Visits: 429999

Do you have source code, articles, and tutorials to share?
Visual Basic, VB.NET, C#, PHP/MySQL, C/C++, Java/JavaScript, ASP/ASP.NET, MS Access, FoxPro, SQL
You can write your own content here.


    If the information on this site helps you and you would like to make donation to please click the LINK below.

    If you want to support us, please make a contribution. Any amount is appreciated. To make a donation via PayPal, credit card, or e-check..

    Please click the DONATE link..

    Your contribution will make grow in the future.



Fancy header navigation menu using css3 transition

    Posted Akash Bhagwat Posted On January 30, 2016

    HTML/CSS 0 Current Comments 2174 Views

    Like 0 people liked this.
      In this script we will look at the new css3 feature css3 transition. css3 transition is in experiment (draft) phase so while using properties related to it you have to prefix it with “-moz-“ for Firefox, “-webkit-“ for chrome and safari, and “-o-“ for opera.Top better understand how it works We will be creating a navigation menu using css3 transition effect. 

    Our final navigation menu will look something like this

      I am using two different directories for storing black and white images and color images. So all the black and white images are in “bw” folder and all the color images are in “color” folder. When first time menu loads we will show bw images and on mouse over event we will replace that “bw” folder name with “color” so bw images will become colorful and it will give a fancy look to the navigation menu. 


          As i said earlier i am using “-moz”,”-webkit-” and “-o-” so it can work in all the browsers. Internet explorer doesnt support css3 transition property yet so what we can do it just hope that next version of IE will support it. And this is what we have done till date, we are just hoping hoping and hoping but IE never keep up with other browsers.

  • HTML5
  • CSS3
  • HTML


Share With Your Friends
Share Your Thoughts With Other Users

Be the first to comment.

Leave a Reply
This small test serves as access restriction against malicious bots.