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 */ <ul id="fly-menu"> <li> <a href="http://www.webstuffshare.com"> <img src="images/heart.png" alt="webstuffshare" /> Webstuffshare Home </a></li> <li> <a href="http://feeds.feedburner.com/webstuffsharecom"> <img src="images/rss.png" alt="rss" /> Subscribe RSS Feed </a></li> <li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=webstuffsharecom"> <img src="images/email.png" alt="email" /> Subscribe Email </a></li> <li> <a href="http://twitter.com/hdytsgt"> <img src="images/twitter.png" alt="twitter" /> Follow Twitter </a></li> </ul> /* Sample #2 */ <ul id="fly-glow-menu"> <li> <a href="http://www.webstuffshare.com"> <img src="images/heart.png" alt="webstuffshare" /> Webstuffshare Home </a></li> <li> <a href="http://feeds.feedburner.com/webstuffsharecom"> <img src="images/rss.png" alt="rss" /> Subscribe RSS Feed </a></li> <li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=webstuffsharecom"> <img src="images/email.png" alt="email" /> Subscribe Email </a></li> <li> <a href="http://twitter.com/hdytsgt"> <img src="images/twitter.png" alt="twitter" /> Follow Twitter </a></li> </ul>
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; }
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); }
[CodeSnippet] CSS3 Flying Menu (via @hdytsgt)
[Community News] jQuery Fundamentals
RGraph : HTML5 Canvas Graph Library
jQuery Plugin : jQuery iPhone UI
Pikachoose : Another jQuery Plugin for Image Gallery
HTML5 Security Cheatsheet
[Community News] How to turn any jQuery plugin into a Wordpress one
Zoom Your Element Using Zoomooz.js
[Community News] Build a Flash-like Game With Scripty2
[Community News] CSS3 Transitions available on Firefox 3.7
[Community News] CSS from the Ground Up
- How To Create iPhone-Style Navigation (Part I)
This post has got 23 shouts so far - jQuery Plugin : jConfirmAction
This post has got 34 shouts so far - iPhone-Style Navigation:AJAX + Rotate (Part II)
This post has got 12 shouts so far - Simple Flip Puzzle Effect with jQuery
This post has got 6 shouts so far - Howto Create Mac-like Login Form
This post has got 7 shouts so far - Implement Password Strength Meter & Gauge.js
This post has got 8 shouts so far - Stylize Your Own Checkboxes
This post has got 15 shouts so far - Create Animated Navigation Menu From Stratch
This post has got 7 shouts so far
- showing database connection error… to check...
by melwyn on Pikachoose : Another jQuery Plugin for Image Gallery - Great article! I’m from Brazil, I’ve been following your...
by Thiago on [CodeSnippet] CSS3 Flying Menu - Looks nice
by TheShadow on Filter Image View Using jQuery - Nice drop down menu tutorial.
by TheShadow on Simple CSS3 Dropdown Menu - love your site
by eJobsViet on Free Web UI Element Pack






Beben
wah bagus kang bisa loncat² yak…hihihihi
gaya!!! review gak yah :-”
Oren Yomtov
You are using “border=0″ in a “CSS3 Flying Menu” tutorial, that is a bit ironic.
Hidayat Sagita
@Beben
Makasih ya mas
@Oren Yomtov
Thank you Oren, I just realized that border attribute in img is obsolete, I’ve update the demo.
Derrick
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.
Hidayat Sagita
@Derrick
Since IE will release version 9 and we won’t back into the past, soon it will be working
Bilal Çınarlı
A little buggy in firefox if cursor hovers from bottom
Thiago
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.