Learn and share. The simplest harmony.

 

[CodeSnippet] CSS3 Flying Menu

Posted on June 25, 2010 and got 15 shouts so far

This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result. Enjoy!

Firstly, we need to create list menu using unordered list element :

/* Sample #1 */

/* Sample #2 */



They are arranged vertically by default, so we must arrange them horizontally using CSS property ‘float‘ with ‘left‘ value. Next, add CSS transition to make any properties change on it animated, we set the duration in 0.3 seconds or 300 milliseconds.

.cleaner {
	clear: both;
}

#fly-menu, #fly-glow-menu {
	margin: 1em auto 0 auto;
}

	#fly-menu li, #fly-glow-menu li {

		/* Basic style */
		list-style-type: none;
		margin-right: .5em;
		float: left;
		font-size: 15px;
		background: #cacaca;
		padding: 10px;
		cursor: pointer;

		/* Add shadow */
		-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);

		/*
			Add animation using transition
			-webkit : Safari & Chrome.
			-moz : Firefox
			-o : Opera
		*/
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}



Since each menu is having float with left value, we need a cleaner element to make another element not floating into the menu.
The last are reading hover event on each menu by adding pseudo property :hover and change the ‘margin-top‘ properties into -1em. This will make our menu fly upwards when user hovering them.

#fly-menu li:hover {
	margin-top: -1em;
}

Picture 2


We can also make the animation nicer by changing menu’s background color and modify its box shadow properties or anything we need.

#fly-glow-menu li:hover {

	margin-top: -1em;
	background: #fff;

	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}

Picture 4

 

This Post Tags :

Bookmark Post :

Pin It
  • wah bagus kang bisa loncat² yak…hihihihi
    gaya!!! review gak yah :-” :D

  • You are using “border=0″ in a “CSS3 Flying Menu” tutorial, that is a bit ironic.

  • @Beben
    Makasih ya mas :)

    @Oren Yomtov
    Thank you Oren, I just realized that border attribute in img is obsolete, I’ve update the demo. :)

  • Why implement something that won’t work on internet explorer which is on 90%+ of machines. I am not an explorer fan but I cant ignore it is out there.

    • First of all IE in use only on about 46% of all web traffic.
      Second of all if Microsoft jump from the bridge into bankruptcy do you quite your job and jump with them?

  • @Derrick
    Since IE will release version 9 and we won’t back into the past, soon it will be working :)

  • A little buggy in firefox if cursor hovers from bottom

  • Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

  • minal ‘aidin wal faidzin yah bos ^^
    maap lahir dan bathin :)

  • cuy kok gak update lagi, lagi sibuk nyiapin dana buat kimpoi yach?

  • setres lu yat,,, temen lw bule smua..

  • perfect tutorial thanks..

  • This not at the moment, hehe…

  • bagus juga nich, bisa buat belajar nich..:D

  • Nice way to do simple animation on site and not only for navigation.
    Lets hope that Microsoft one day decide to join Web community.
    Thanks