May 08, 2013
By
Wednesday, May 08, 2013
5 comments

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.0 by MJN..


                     I have Posted My First Two Creation Using CSS3   Earlier In my Posts Before,, Those are
  1.  Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..
  2.  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 Drop Down Menu Using CSS3.. 


I think and Hope you all Will Like it..    Take A Live Preview    Live Demo

So let me Share you this Awesome Drop Down Menu.. 

How to Add this to 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..


<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<link rel="stylesheet" href="https://googledrive.com/host/0B_7JWdEqBhVVNTFlRld1RUpVeUE"/>


<div class="mjn-metro-menu">

<!-- defining top menu elements -->
<ul class="navi">
 <li id="n1"><a class="mjn-tab1" href="http://mjntechtips.blogspot.in/" title="Home" ></a>
<!-- defining sub menu elements --><ul class="sub">
 <li class="l"><a class="mjn-fb" href="https://www.facebook.com/mjntech" title="Like Us on Facebook"></a></li>
 <li class="c"><a class="mjn-tw" href="https://www.twitter.com/manjunathg17" title="Follow Us on Twitter"></a></li>
  <li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/116155905562588571799"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/mjntech"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://mjntechtips.blogspot.in/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
 <li class="r"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://mjntechtips.blogspot.in/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="mjntechtips.blogspot.in/2013/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2013/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/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..
    •  


Useful Note:



Important Note:
  • You Can Comment If any Problem Persist.. or Need Help With This Widget..
  • This will be updated soon  with much more Menu's i.e.,Multilevel As soon as possible.
  • So Join our Blog and Subscribe for latest news updates..


I hope you have found this post helpful..
Don't forget to Subscribe , Comment and Share this post..
With Regard's ,

Tagged with :

Manjunath.G (MJN) is a Blogger, web designer and developer .. He has a passion towards Programming , Web designing and also he loves Technology..

5 comments:

  1. tharakaOctober 06, 2013

    nice one ....

    ReplyDelete
  2. ManjunathJanuary 31, 2014

    Thanks

    ReplyDelete
  3. AnonymousMay 31, 2015

    This is very cool, but I don't need these kind of categories. I need categories like "Home" "Esploration" "Trunk" "Potions and Duels" and "Others" and obviously they need the under-category to come out.. How can I solve my problem? Can I modify them? Can you make a code with the words I require for me? How does it work?

    Please answer soon because I really need your answer.

    ReplyDelete
  4. MAYA KHANFebruary 23, 2020

    Hey! Great post! Please do tell us when we can see a follow up! visit this site

    ReplyDelete

Subscribe to: Post Comments (Atom)
 
Toggle Footer
Top