CSS3 is very useful tool in web development. It provides several features that you can implement to develop your website more effectively that helps the visitors for easy navigation and allows the visitor to spend more time on your website. One of the feature which is i am going to discuss here is the CSS MENUS in the website. If the menus in your website are beautiful and attractive, the visitor will be more eager to stay on your website and navigate easily and get to know about services you are providing. So here I am going to show you one of the menus which is called “FLYING MENU”. To apply the flying transitions to the menu, follow the following steps.
- Log in to your Blogger Dashboard.
- Go To Template > Backup. (Click Here To See, How?)
- Click “EDIT HTML”.
- Press CTRL+F and find <head> tag.
- Just below the <head> tag place the following code.
<style>
.menu
{
clear: both;
}
#fly-menu,
#fly-glow-menu
{
margin: 1em auto 0 auto;
}
#fly-menu li, #fly-glow-menu li
{
/* For Styling*/
list-style-type: none;
margin-right: .5em;
float: left;
font-size: 15px;
background: #87CEFA;
padding: 10px;
cursor: pointer;
/* For 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);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
#fly-menu li:hover
{
margin-top: -1em;
}
#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);
}
</style>
- Now go to “LAYOUT” > “ADD A GADGET”.
- Select “HTML/JAVASCRIPT” from the list and add the following code:
<!--Fly Menu-->
<ul id="fly-menu">
<li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/HomeIcon_zpsf1a46e79.jpg" alt="Home" width=20 height=20 align="center"> Home </a></li> <li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/rss_zpsf345b93f.jpg?t=1366731808" alt="rss" width=20 height=20 align="center"> Subscribe RSS Feed </a></li><li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/facebook_zps86c0e50a.jpg?t=1366731804" alt="facebook" width=20 height=20 align="center"> Like On Facebook </a></li> <li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/twittter_zpsb989d4ca.jpg?t=1366731815" alt="twitter" width=20 height=20 align="center"> Follow On Twitter </a></li>
</ul>
<!--Fly Glow Menu-->
<ul id="fly-glow-menu">
<li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/HomeIcon_zpsf1a46e79.jpg" alt="Home" width=20 height=20 align="center"> Home </a></li> <li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/rss_zpsf345b93f.jpg?t=1366731808" alt="rss" width=20 height=20 align="center"> Subscribe RSS Feed </a></li><li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/facebook_zps86c0e50a.jpg?t=1366731804" alt="facebook" width=20 height=20 align="center"> Like On Facebook </a></li> <li>
<a href="#">
<img src="http://i1310.photobucket.com/albums/s658/ubaidh/twittter_zpsb989d4ca.jpg?t=1366731815" alt="twitter" width=20 height=20 align="center"> Follow On Twitter </a></li>
</ul>
- Click “SAVE”.
That’s it, you are all done.
Note:
Change "#" and links in <img src=""> to your OWN LINKS.
Change "width and height align="center" of icons to your own requirement.
Change the names like HOME, RSS, FACEBOOK, TWITTER to your own requirement.
- Don't forget to share this post with your friends and also leave your valuable thoughts below about this post..
