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:

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:

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.

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.


Thanks to our readers Pete and Martin to contribute with code demos.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.