How To Create a Flying Menu Using CSS3

By Michael Rohde

In my last article, I showed you how Webstuffshare.com created a drop down menu using CSS3. In this article, I'll highlight from the same site and show you how to create a flying menu. The talented individual who came up with these sets of CSS3 code also wrote code snippets for creating your own dashboard menu. I'll focus on that in my next article.

The coder's name is Hidayat Sagita, and he considers himself an "ambush artist" living in Jakarta, Indonesia. He practices "codejutsu" but does not consider himself a "strong ninja." HTMLgoodies disagrees with that sentiment and we are rather saddened that his last blog post is dated November 2010.

Let's start with the demo for the flying menu CSS3 code  so you can see what the code accomplishes.

Hidayat starts by creating a basic HTML unordered list element as such:

<ul id="fly-menu">
<li>
<a href="URL">
<img src="images/image.png" alt="desc"> Title
</a></li>
<li>
<a href="URL">
<img src="images/image.png" alt="desc"> Title
</a></li>
<li>
<a href="URL">
<img src="images/image.png" alt="email"> Title
</a></li>
<li>
<a href="URL">
<img src="images/image.png" alt="twitter"> Title
</a></li>
</ul>

The actual href URLs and image links were removed to enforce that you use your own URLs when you use this code for your own site.

In basic HTML, lists are always ordered vertically. However, through the power of CSS, you can re-arrange the order of the list in a horizontal fashion. Hidayat accomplished this by using the float and left property values. He did mash a ton of code together into one list, which will be broken down here and explained.

Show Me the CSS3 Code!

.cleaner {
clear: both;
}

The clear property does not allow floating elements on the left or the right side of a specified paragraph. By setting this property, it clears the margins and allows you to create your own. How to create your own margins is shown below.

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

Next, clear the normal list style and and create new margin and float definitions along with the other basic properties. Hidayat also defines his shadow and transitions here as well. Both of these topics have been covered in previous HTMLgoodies articles.

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

Because each menu item is now defined as having a floating left value, Hidayat explains that you need to add an additional element to stop the other elements from floating into the menu.

To make the menu item fly upwards, simply add in a new margin element as a hover effect:

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

To put the cherry on top of this sundae, a nice effect is to change the background color of the menu item when it flies upward:

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

Have fun with this and enjoy experimenting with the CSS3 code.

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •