Creating Flying Menu with CSS3
Among the various forms of task bars and menus that can be created with the help of CSS3 only, the flying menu is one interesting yet easy to implement type. This menu would be implemented in this tutorial with the use of CSS3 only. The transition propertyof CSS3 would be used in this implementation which is quite powerful and allows the creation of animations without any need of JavaScript or Flash. To begin with the implementation, you would need to create the menu with unordered list, which can be done with simple HTML5 and has been discussed in some of the previous tutorials, so we would skip this part.
To start with, we would need HTML tags to place the CSS IDs and classes within:
|
1 2 3 4 5 6 |
<ul id="fly-menu"> <li> <a href="http://www.etechy101.com"> <img src="images/heart.png" alt="etechy101.com"/> Etechy101 Home </a> </li> <li> <a href="http://feeds.feedburner.com/Etechy101"> <img src="images/rss.png" alt="rss"/> Subscribe RSS Feed </a> </li> <li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=Etechy101"> <img src="images/email.png" alt="email"/> Subscribe Email </a></li> <li> <a href="http://twitter.com/StarcomSystems"> <img src="images/twitter.png" alt="twitter"/> Follow Twitter </a> </li> </ul> |
The list that would be implemented would be, by default, arranged vertically and to adjust it in a horizontal position, the CSS3 property of float would be used with ‘left’ value:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.cleaner { clear: both; } #fly-menu, #fly-glow-menu { margin: 1em auto 0 auto; } #fly-menu li, #fly-glow-menu li { list-style-type: none; margin-right: .5em; float: left; font-size: 15px; background: #cacaca; padding: 10px; cursor: pointer; -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); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; } |
Now we need to give the floating effect to the menu elements with the help of the :hover property. With this property, the menu would float when we hover upon it.
|
1 2 3 4 5 6 7 |
#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); } |
And this completes the easy and simple implementation of a flying menu in which we don’t need anything other than CSS3. The menu can be used on personal blogs and websites to increase the beauty or according to preference.
Demo
Thanks to our readers Pete and Martin to contribute with code demos.
http://jsfiddle.net/cJNCa/
http://jsfiddle.net/Bgw57/1/
BlueHost | HostGator | Media Temple
