How to Create a Flashy Menu Using CSS

Today I’m 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.

Download the Demo & Source

Final result:

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;
	   }

I am using ‘Kotta One’ font for span text, normal font size and weight of 20px and 700 respectively. I’ve made the font color for the text in its hover state white.

	.main-ul li a span{
		          display:block;
		          padding-top:10px;
		          font-weight:700;
		          font-size: 20px;
		          color: rgba(120, 120, 120, 0.9);
		          text-transform:uppercase;
		          font-family: 'Kotta One', serif;
 	}

	.main-ul li:hover span{
		                  color: #fff;
	}

Here comes our main part, I have already added transition effect for the anchor tags. Now add hover effects for each anchor tag list item by changing its background color. So when someone hovers over each list menu item it will change background color to a new color. I’m also adding CSS3 transform rotate effects of 3 degrees.

	.main-ul li:nth-child(1):hover a{
			              background-color: rgba(175,54,55,0.8);
			              -moz-transform: rotate(-3deg);
			              -webkit-transform: rotate(-3deg);
			              -o-transform: rotate(-3deg);
			               transform: rotate(-3deg);
	}

Now repeat the above step for all list items with a new background color of your choice!

	.main-ul li:nth-child(2):hover a{
				background-color: rgba(199, 204, 73, 0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(3):hover a{
				background-color: rgba(213, 135, 11, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(4):hover a{
				background-color: rgba(51, 143, 144, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(5):hover a{
				background-color: rgba(117,18,98,0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(6):hover a{
				background-color: rgba(33, 136, 215, 0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(7):hover a{
				background-color: rgba(109, 109, 109, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(8):hover a{
				background-color: rgba(152, 120, 92, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}

That’s it, we have accomplished a simple flashy menu, so that when someone hovers over our menu items simultaneously it will change background color and slightly rotate. Thanks for reading!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Stephanie Lucas

    Check the link in the Subtle Pattern link :-) It’s missing an “s” and sending readers to the wrong site

    Best, Stephanie

    • http://gplus.to/rupesh Rupesh

      Hey Stephanie, I think it’s fixed now!

      Thanks,
      Rupesh

  • http://www.beingonweb.com/ Arun Kumar

    Not working in IE 8.

    Regards,
    Arun

  • http://winniethepooh.rocks Galen777

    A nice idea about five years ago, but is a bit clumsy now… also, not having a live demo is a bit of a pain, as it took a download, unzip and test for me to discover that i didn’t like it… come on, guys, you’re usually so sharp, but you dropped the ball on this one

  • Galen777

    A nice idea about five years ago, but is a bit clumsy now… also, not having a live demo is a bit of a pain, as it took a download, unzip and test for me to discover that i didn’t like it… come on, guys, you’re usually so sharp, but you dropped the ball on this one.

  • http://j7lab.blogspot.com/ fabio

    Hi
    it seams that it does not work in IE
    best, Fabio

  • falcon

    tried this in ie9 and it doesnt work but works great with firefox.

    will this work with older versions of ie?

    thanks
    :)

  • raf

    Nice but it doesn’t work in IE (still quite popular browser) like it should!!!

  • http://gplus.to/rupesh Rupesh

    @ all

    To make it support in IE, add Microsoft transform and transition property .
    That is

    .main-ul li a {
    -ms-transition: all 1s;

    }

    .main-ul li:nth-child(1):hover a{

    -ms-transform:rotate(-3deg);
    }

    Above method should work fine with latest IE browsers, and it doesn’t work in old IE browsers.

  • inoxp

    Good one, I was looking for this!

  • Kriss

    Hi all
    I am sorry but cant get IE9 to rotate… any advice please? Ive added the “–ms-transform:…” property where appropriate
    Thanks in advance

    • Plauth

      Doesn’t work in IE9!!

  • http://www.tdabids.com ljc

    The letters seem to rotate at a different speed and then realign. Is there anyway to address is?

  • shark

    simply stunning piece keep up the good work
    @_@

  • سعید

    thanks