webstuffshare.com

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 &amp; 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

Tags :   Code Snippet    CSS    Menu  

Share :           [CodeSnippet] CSS3 Flying Menu (via @hdytsgt)



webstuffshare RSS



  Similar Stuffs  

  7 Shouts to “[CodeSnippet] CSS3 Flying Menu”  

    Hidayat Sagita


    Derrick


    Hidayat Sagita



  Shout Something  

  Follow Webstuffshare  
RSS
  FREE Subscribe  

Get Free Webstuffshare Daily Updates.

  Hot Stuffs  
  Recent Shouts