Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1
I have Posted My First Two Creation Using CSS3 Earlier In my Posts Before,, Those are
- Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..
- Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..
So after Working on Those Two Metro UI and Ribbon UI Widgets today I am Here With One More Metro UI Win 8 Style Drop Down Menu Using CSS3..
Demo of Metro UI Drop Down Menu With Sliding Tiles Effect v1.1
After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site..
How to Add Metro UI Drop Down Menu With Sliding Effect Into Your Blog:
- First Go to "Blogger" and Go to your Blog Dashboard..
- Now Click On "Layout" In Left Side of your Blog..
- Now Click on "Add Gadget"..
- You Will Get Many Widgets..Scroll Down to "HTML/JavaScript"..
- Click On "HTML/JavaScript"..
- Now Paste This Below Set of Code in it..
<style>
/* demo page styles */
.mjn-tab1
{
background:url(https://lh3.googleusercontent.com/-hdBb7Rr9rtE/UYn-oaJ0OSI/AAAAAAAAAXk/wA7TlyD1RtY/h120/home.png) no-repeat center center #4d90fe;
}
.tab1:hover
{
background:url(https://lh3.googleusercontent.com/-hdBb7Rr9rtE/UYn-oaJ0OSI/AAAAAAAAAXk/wA7TlyD1RtY/h120/home.png) no-repeat center center #3682FC;
}
.mjn-fb
{
background:url(http://2.bp.blogspot.com/-dKoXyM8NY2w/UYoAh6OmSTI/AAAAAAAAAYM/TM387EMU9Aw/s1600/facebook2.png) no-repeat center center #2A82D9;
}
.mjn-fb:hover
{
background:url(http://2.bp.blogspot.com/-dKoXyM8NY2w/UYoAh6OmSTI/AAAAAAAAAYM/TM387EMU9Aw/s1600/facebook2.png) no-repeat center center #1f69b3;
}
.mjn-tw
{
background:url(https://lh6.googleusercontent.com/-tAiPX-vmOtE/UYSi2-XmHDI/AAAAAAAAARE/j-hN12wLQLk/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0;
}
.mjn-tw:hover
{
background:url(https://lh6.googleusercontent.com/-tAiPX-vmOtE/UYSi2-XmHDI/AAAAAAAAARE/j-hN12wLQLk/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
}
.mjn-g
{
background:url(http://4.bp.blogspot.com/-Rmpx4BuwsCs/UYoAiBMkIjI/AAAAAAAAAYQ/fPB23dGR9n8/s1600/google+plus2.png) no-repeat center center #DC321E;
}
.mjn-g:hover
{
background:url(http://4.bp.blogspot.com/-Rmpx4BuwsCs/UYoAiBMkIjI/AAAAAAAAAYQ/fPB23dGR9n8/s1600/google+plus2.png) no-repeat center center #c53727;
}
.mjn-rss
{
background:url(http://3.bp.blogspot.com/-BHiTPnqR7k0/UYoAiFk2SDI/AAAAAAAAAYU/saOBesgx_7Q/s1600/feed2.png) no-repeat center center #E9A01C;
}
.mjn-rss:hover
{
background:url(http://3.bp.blogspot.com/-BHiTPnqR7k0/UYoAiFk2SDI/AAAAAAAAAYU/saOBesgx_7Q/s1600/feed2.png) no-repeat center center #F9A914;
}
.mjn-tab2
{
background:url(https://lh4.googleusercontent.com/-RLlIE2bGpCs/UYn-ojOERCI/AAAAAAAAAXo/-DM5UVKOUXg/h120/Tag.png) no-repeat center center #35aa47;
}
.mjn-tab2:hover{
background:url(https://lh4.googleusercontent.com/-RLlIE2bGpCs/UYn-ojOERCI/AAAAAAAAAXo/-DM5UVKOUXg/h120/Tag.png) no-repeat center center #1d943b;
}
.mjn-tab2sub
{
background: #35aa47;
}
.mjn-tab2sub:hover{
background: #1d943b;
}
.mjn-tab3
{
background:url(https://lh5.googleusercontent.com/-OqJ7UIipim4/UYn9tEe_YbI/AAAAAAAAAXQ/UurSDS2lFpA/h120/archives.png) no-repeat center center #852b99;
}
.mjn-tab3:hover
{
background:url(https://lh5.googleusercontent.com/-OqJ7UIipim4/UYn9tEe_YbI/AAAAAAAAAXQ/UurSDS2lFpA/h120/archives.png) no-repeat center center #6d1b81;
}
.mjn-tab3sub
{
background: #852b99;
height:70px;
}
.mjn-tab3sub:hover
{
background: #6d1b81;
}
.mjn-tab4
{
background:url(https://lh4.googleusercontent.com/-Y_m6VNE1w8Y/UYn_KCNKQwI/AAAAAAAAAYA/RNMtdoRA-L8/h120/contact.png) no-repeat center center #d84a38;;
}
.mjn-tab4:hover{
background:url(https://lh4.googleusercontent.com/-Y_m6VNE1w8Y/UYn_KCNKQwI/AAAAAAAAAYA/RNMtdoRA-L8/h120/contact.png) no-repeat center center #c53727;
}
.mjn-tab4sub
{
background: #d84a38;;
}
.mjn-tab4sub:hover{
background: #c53727;
}
.mjn-tab5
{
background:url(https://lh4.googleusercontent.com/-Sg0vO22rgYg/UYn-oKZqjNI/AAAAAAAAAXc/PuxzgiHj7rw/h120/Menu.png) no-repeat center center #555;
}
.mjn-tab5:hover
{
background:url(https://lh4.googleusercontent.com/-Sg0vO22rgYg/UYn-oKZqjNI/AAAAAAAAAXc/PuxzgiHj7rw/h120/Menu.png) no-repeat center center #222;
}
body {
background:none;
margin:0;
padding:0;
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
}
.mjn-metro-menu {
position:relative;
background:none;
width:500px;
height:90px;
border:none;
margin:20px auto;
padding:20px;
float:left;
}
/* navigation menu styles - main styles */
ul.navi {
position:relative;
z-index:100;
padding:0;
margin:0 0 0 60px;
list-style:none;
width:auto;
height:30px;
}
ul.navi > li {
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
ul.navi a {
display:block;
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
line-height:30px;
text-align:center;
text-decoration:none;
}
ul.navi a img {
border:0;
}
ul.navi a span {
position:relative;
top:30%;
font: 14px Segoe UI, Helvetica, Arial, sans-serif;
color:#fff;
}
/* top line - hover styles */
ul.navi:hover {
height:200px;
}
ul.navi:hover li#n1 {
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
-webkit-transform: translatex(0px);
transform: translatex(0px);
}
ul.navi:hover li#n2 {
-moz-transform: translatex(90px);
-ms-transform: translatex(90px);
-o-transform: translatex(90px);
-webkit-transform: translatex(90px);
transform: translatex(90px);
}
ul.navi:hover li#n3 {
-moz-transform: translatex(180px);
-ms-transform: translatex(160px);
-o-transform: translatex(160px);
-webkit-transform: translatex(160px);
transform: translatex(180px);
}
ul.navi:hover li#n4 {
-moz-transform: translatex(260px);
-ms-transform: translatex(270px);
-o-transform: translatex(270px);
-webkit-transform: translatex(270px);
transform: translatex(270px);
}
ul.navi:hover li#n5 {
-moz-transform: translatex(360px);
-ms-transform: translatex(360px);
-o-transform: translatex(360px);
-webkit-transform: translatex(360px);
transform: translatex(360px);
}
/* submenus - common styles */
ul.sub {
padding:0;
margin:0;
list-style:none;
width:100%;
height:200px auto;
position:absolute;
left:0;
top:0;
z-index:-1;
opacity:0;
-moz-transition: opacity 0s linear 1s;
-ms-transition: opacity 0s linear 1s;
-o-transition: opacity 0s linear 1s;
-webkit-transition: opacity 0s linear 1s;
transition: opacity 0s linear 1s;
}
ul.sub li {
width:80px auto;
height:80px;
position:absolute;
left:0;
top:0;
z-index:-1;
-moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
-ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
-o-transition: -o-transform 0.5s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out 0.5s;
}
/* submenus - hover styles */
ul.navi > li:hover ul {
opacity:1;
-moz-transition: opacity 0s linear 0.5s;
-ms-transition: opacity 0s linear 0.5s;
-o-transition: opacity 0s linear 0.5s;
-webkit-transition: opacity 0s linear 0.5s;
transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
-moz-transform: translatex(-70px) translatey(90px);
-ms-transform: translatex(-70px) translatey(90px);
-o-transform: translatex(-70px) translatey(90px);
-webkit-transform: translatex(-70px) translatey(90px);
transform: translatex(-70px) translatey(90px);
}
ul.navi li:hover ul li.c {
-moz-transform: translatex(2px) translatey(90px);
-ms-transform: translatex(2px) translatey(90px);
-o-transform: translatex(2px) translatey(90px);
-webkit-transform: translatex(2px) translatey(90px);
transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
-moz-transform: translatex(74px) translatey(90px);
-ms-transform: translatex(74px) translatey(90px);
-o-transform: translatex(74px) translatey(90px);
-webkit-transform: translatex(74px) translatey(90px);
transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
-moz-transform: translatex(146px) translatey(90px);
-ms-transform: translatex(146px) translatey(90px);
-o-transform: translatex(146px) translatey(90px);
-webkit-transform: translatex(146px) translatey(90px);
transform: translatex(146px) translatey(90px);
}
</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<div class="mjn-metro-menu">
<!-- defining top menu elements -->
<ul class="navi">
<li id="n1"><a class="mjn-tab1" href="http://s2free.blogspot.com/" title="Home" ></a>
<!-- defining sub menu elements --><ul class="sub">
<li class="l"><a class="mjn-fb" href="https://www.facebook.com/yourlink" title="Like Us on Facebook"></a></li>
<li class="c"><a class="mjn-tw" href="https://www.twitter.com/yourlink" title="Follow Us on Twitter"></a></li>
<li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/123456789"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/yourlink"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://s2free.blogspot.com/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
<li class="r"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="s2free.blogspot.com/2013/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013"><span>2010</span></a></li>
</ul>
</li>
<li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="mjn-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="mjn-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="mjn-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="mjn-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>
</!doctype>
- Now Click Save and Drag it to your desired position..
Customization :
Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS and other in Red with your Link..Replace the Names Highlighted in Pink with your Words appropriate to link given..
0 comments:
Post a Comment