8 Dec 2014

Animated CSS Menus for Blogger

On In , Post a Comment!
Today I have two types of animated menus for you with HTML and CSS. I'm sorry about not having a Demo to show you. Please note that this menu is not related to the Blogger's Page widget. Lets have a look at the steps: From your Blog's Dashboard, navigate to Layout. Click Add a Gadget and select HTML/Javascript from the list. Now copy paste one of the below codes. Replace the menu titles with your custom titles and Save the Gadget. Don't forget to replace "#" with your links. Once you have saved your gadget, drag it below the Header and Save the arrangement.

Animated CSS Menus for Blogger
Menu1:
................................................................................................................................................................
<menu class="menu1"> <a href="#" data-hover="Home"><span>Home</span></a> <a href="#" data-hover="About Us"><span>About Us</span></a> <a href="#" data-hover="Tutorials"><span>Tutorials</span></a> <a href="#" data-hover="HTML&CSS"><span>HTML&CSS</span></a> <a href="#" data-hover="Sitemap"><span>Sitemap</span></a> </menu>

<style>menu a {position: relative; display: inline-block; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #333; -moz-text-shadow: 1px 0px #333; text-shadow: 1px 0px #333;}

.menu1 {position: relative; z-index: 1;}


.menu1 a {overflow: hidden; color:#fff; text-decoration: none;margin: 5px 10px;}


.menu1 a span {display: block; padding: 12px 20px; background: #F90; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}


.menu1 a:before {position: absolute; top: 0; left: 0; z-index: -1; padding: 12px 20px; background: #FFF; color: #F90; text-decoration: none; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%);
}

.menu1 a:hover span, .menu1 a:focus span {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%);}


.menu1 a:hover::before, .menu1 a:focus::before {-webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%);} </style>

................................................................................................................................................................

Menu2:
................................................................................................................................................................
<menu class="menu2"> <a href="#" data-hover="Home">Home</a> <a href="#" data-hover="About Us">About Us</a> <a href="#" data-hover="Tutorials">Tutorials</a> <a href="#" data-hover="HTML&CSS">HTML&CSS</a> <a href="#" data-hover="SEO">SEO</a> <a href="#" data-hover="Javascript">Javascript</a> <a href="#" data-hover="Socialmedia">Socialmedia</a> <a href="#" data-hover="Sitemap">Sitemap</a> </menu>

<style>menu a {position: relative;  display: inline-block; padding:12px; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #666; -moz-text-shadow: 1px 0px #666; text-shadow: 1px 0px #666;}

.menu2 a {color: #FF9900;text-decoration: none;}

.menu2 a:before {color: #00FF00;text-decoration: none; content: attr(data-hover); position: absolute; opacity: 0; -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none;}

.menu2 a:hover::before, .menu2 a:focus::before {text-decoration: none; -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1;} </style>
.....................................................................................................................................................................................................

No comments: