Are you bored with your website’s navigation menu? Does anyone want to revamp his unappealing navigation menu into Windows 8 Style Metro Menu? Navigation menu is one of the core elements of a website because without a user-friendly Menu visitors can’t search the content in depth. In this situation, an ugly Navigation Menu could act a piece of garbage. Therefore, it is essential to have an elegantly style Navigation Menu that attracts a person like a bee to a honey. To provide more power to Blogger users, we have created a new windows 8 look like Metro UI Navigation menu for blogger enabled websites. It has tons of features which we will discuss in today’s article.
What is METRO UI Menu?
If anyone has experience the interface of Microsoft Windows 8, or the new range of Windows Smart phones, then this METRO UI menu is not a new thing for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is still chaotic about it, then he can check out the following screenshot.
Where The Metro UI Menu Would Appear?
It depends on a person that where he wants to utilize this Menu because it is so flexible that it can take shape of any theme or template. However, it would be ideal if anyone places this menu at the top of his website by doing that, visitors can easily access it without facing any hesitation whatsoever. We have attached an interactive Metro menu below so don’t hesitate to try it.
How to Create Windows 8 like Metro Menu in Blogger?
The steps mentioned below are ideal for those bloggers who have less knowledge about HTML coding. Following instructions are extremely straightforward so anyone can easily apply them. Follow following instructions correctly.
Step#1: Adding CSS StyleSheet:
- Go to Blogger.com >> Template.
- Select Edit HTML >> Proceed.
- Now within the template search for ]]></b:skin> tag and just above it paste the following CSS Coding. Once, everything is done Save the Template by pressing “Save Template” Button and proceeds to the next step.
/*===MBL METRO UI Menu==*/
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.mblmetromenu {
width:100%;
}
}
/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute;
width:100%;
z-index:999;
display:none;
}
.om-ctrlbar {
width:100%;
height:48px;
}
.om-ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline-block;
text-align:center;
}
.om-ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px;
margin:auto;
}
.om-controlitem {
height:48px;
cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position:absolute;
z-index:9999;
left:0;
top:0;
}
.om-movenext {
position:absolute;
z-index:9999;
right:0;
top:0;
}
.om-controlitems {
width:100%;
}
.om-itemholder {
width:100%;
}
}
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px;
float:left;
display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align:center;
cursor:pointer;
width:90px;
height:90px;
}
.tile-bt a {
display:block;
padding-top:12px;
text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto;
padding-bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile-bt span {
font-size:12px;
padding-bottom:10px;
display:block;
}
.tile-bt:active {
opacity:0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile-bt-large {
width:190px;
height:90px;
line-height:90px;
text-align:center;
cursor:pointer;
}
.tile-bt-large a {
display:block;
text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile-bt-large span {
vertical-align: middle;
display:inline;
}
.tile-bt-large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align:center;
cursor:pointer;
width:190px;
height:190px;
}
.tile-bt-extralarge a {
display:block;
padding-top:52px;
text-decoration: !important;
}
.tile-bt-extralarge img {
margin:0 auto 0 auto;
padding-bottom:22px;
height:80px;
width:80px;
position:relative;
display:block;
}
.tile-bt-extralarge span {
font-size:14px;
padding-bottom:20px;
display:block;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
box-shadow:0px 0px 6px 3px #fff;
-webkit-box-shadow:0px 0px 6px 3px #fff;
-moz-box-shadow:0px 0px 6px 3px #fff;
-o-box-shadow:0px 0px 6px 3px #fff;
-ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow:0px 0px 6px 3px #AACA37;
-webkit-box-shadow:0px 0px 6px 3px #AACA37;
-moz-box-shadow:0px 0px 6px 3px #AACA37;
-o-box-shadow:0px 0px 6px 3px #AACA37;
-ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow:0px 0px 6px 3px #E81750;
-webkit-box-shadow:0px 0px 6px 3px #E81750;
-moz-box-shadow:0px 0px 6px 3px #E81750;
-o-box-shadow:0px 0px 6px 3px #E81750;
-ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow:0px 0px 6px 3px #444;
-webkit-box-shadow:0px 0px 6px 3px #444;
-moz-box-shadow:0px 0px 6px 3px #444;
-o-box-shadow:0px 0px 6px 3px #444;
-ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
Step#2: Adding METRO Menu in Blogger:
- Now it entirely depends on a person where he wants to place this menu. The ideal place of adding it would be just under the header. Therefore, paste the following coding anywhere you want to see this Menu on your site.
<!-- mblmetromenu -->
<div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs73187Y8FTugcReezJwkot4FqNloIT0eEAxO_kSeN3QLmI3ViBmse07lKq-UcfGQYjMlPgaFcgIBHXsDMtNUWcVaXfS1Z9iy38LSh9WMumDht7Wf9nJfHgfhA7fqVsyy9t5GiFvHZu-s/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mBLK-z1lJTrpNzJRHwQOPJVbZycRMnBfG4NCrievofMEwz1gyZHCLwNkRiwq3-Tt82uLVc12aNNJz9186DMMn9kqI3DNi8Kspbsb-bAMDCkRb0xmz5VZAV6u_EkntuaBYf0AhgL2g5s/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMoXzZajra6PuRD8z_ZGxpzQbXLXdw3ZShDfWURKqdPhibWR8pH2wh05j_ynlVd_ZizcUGU0iwAbY_g17XaeYK5yoDtt_gsMqdGixb6mDXajOD-WWqvcIy-MXcAWp2beM-_lO8ggLX1E/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBqN5lFCb6GsKHun6ZhJlrEIXORHYjQBxpJwODeny1elFWGruxI4qvVWOswUT69CZCc4N6o6DWiSuiiqOpM-rXl3L9wgE_Z8lp81YkF2hl0y8h0n3_Qjk0tYI4oVw127vSlF5HHVjPew/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aF3z3catatwWbxKob_sDVNIhcTny30E3zbhodPaYUmU4pmk6oi9fwkMzCf9DQfA6MkT87HYtMSNwdxLHmf_JrDi2dtMMSfJyqjmACMEidypIGmHx59B9CLI9_FBU_1e8pBnvdmUtJvQ/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuF93IgJgq1gp1A0gMeLORjzJdI8vz2s5hp95JBSh5r584MlbCczmFbFWXHORGj51wRdS1sau7otRu5fnCA8Zlsw0XuIEa76wKk7oAOab9-KHekGZgxpYMywevRGm_89Ox6vLpYIfHhg/s1600/help.pn" alt="" />
<span class="light-text">Get HELP</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDsVSh5TB3lEws47R35v_xr-LcMIRAMECZKHWnrPN049Givfd0cxLK8ruBeYlYJSftnSlq5BbTttb9SG1igie7l8LdyXl_GavGD0RMtbmz6tHzfKmi86fze_qpVhZYbLq0k0oPZfebgpU/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwn2dTznrE6JQQOrNSWNrMmE478VKG7x86naxW6yPnhqRtHOk5t-1IFV_8aQM1WVbt1ghetAjWFgCG53-DGPQ4Jps0-__1HBSLvjVkSw9VqHaVhSJK3zLOSlH1-fnwSe1zU7v3eimRAA/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1qW0mhgRaCyztyBAb2MTr9FE9a6Om3bLNwjSDydGY0PAcwAkGNzLf4MohJHIqEZdMbav4qsaHohMy7OQLxAKDjg2UdvvJM1kX5xU9X6ApMTRSLbsEcsBue2l3zNR6f4AknXJr7Uaid4/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJUVBDftlHng52hxrTuIGRUx5S3zhoh-sduJqOLEMCdZ6O3w83rrAyNTWF-sxBq4WZpfTIGQAtTGvMSkV9LDo1djDLpV24lZu2zFHFf9qmErXU_N8EdRDjCrYOy9WYAZGGsJChQ4NfLA/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://www.mybloggerlab.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFBRVsoDLZiMm0xqSHnbZMyi3SPBCD4ZoqFOxnsUDc8t3h1IQu4xBGtSEGElZRTSoffdrQ13TGi6t_a-gShfLd8PypwbfIT_sZQFrK95meuIbqOiYwAswhx_cUyU0tbPpWJgpLpyz1Vo/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
All Done: Indeed straightforward? Well, that’s all. The responsive Windows 8 look like navigation menu has been integrated in your website. Remember: This Menu can be used on any Platform that supports HTML or CSS i.e. WordPress, Jhoomla and etc.
From the Editor's Desk:
Hope everyone has enjoyed today's feast. There are some new surprises planed soon. Let me give you a few clues, we are soon to start a new site. Hope you guys would appreciate that project too. What are your thoughts about this Windows 8 Metro Menu? Take a lot care till them, Peace, Blessings and Happy blogging.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
34 comments
Wow you really rockz bro.
Great widget bro.....
www.MoreBlogTools.com
really great,i was just imagined it,but never thought that it can be created through simple html programming and just common sense. awesome.keep it up.
Yar,.. this is cool... but y a red line appears on hovering only in 60% of Menu's...
wow a new site, well what niche it would be?I am really waiting for your new site bro.One more query on what platform blogger or wordpress?
@Faizan
Awesome bro! You are doing great.
Dude, That Red Line is Appearing Because there is some few Bugs in our FRESHABLE Theme. However, if you try it in a Simple HTML Document then it won't display that RED Line. Hope That Helps. Peace
Well, Because everyone was asking from me to Giveaway MBL Theme. Therefore, we decided to start a Site dedicated to Blogger Themes. Mind you, they are extremely Professional. After designing few themes for Giving. I am feeling a bit jealous. LOL, Jokes a part. Thanks for Being a Great Reader. Peace
Thanks Sis, Without your Prompt Support this wouldn't have been Possible.Thank you very much
dude, you are very cruel. You always remove my comment, i used to love mbl but now i think that you are as mean as mbt. Bye forever. You have lost one precious reader. I always place one link in my comment with no spamming, and you always permit others links but not mine. So bye dude. Bye forever. From now, i would never suggest someone to visit your site. And don't feel too proud yo have such traffic. There are both, google and hackers present. Take it as whatever, i don't care!
Yup Its true he is very cruel.........
MyBloggerLab is a serious online Journal of everything that related Blogger Platform. We are an online resource site that provides quality tips, tricks and all the other tools that are essential to enhance your Blogger experience. The ideal way of improving our resource is to interact with each other within our site though utilizing comments. To provide quality based comments, we have a strict policy to fight against spammy comments.
You Always Do a Comment Like "Thanks VISIT MY SITE" We Call it Spam. We don't know what you call it but we don't allow such comments. We have a Comment Policy Please go forward and check it out.
I can't argue more because, We don't have the authority to change our views and ETC. I Wish you could stay at MBL and share your views. Try to comment to educate people, not for the backlinks. Hope it helps. Peace and Blessings
For More Check Our Comment Policy:
http://www.mybloggerlab.com/p/comment-policy.html
Dude, I guess that being a blogger you should know that comment systems by google are nofollow, and i never posted a comment VISIT MY SITE.. I always post comments like:
Thx,
MyPremiumTricks
That's it
I was giving a Example. Well that's our policy we can't give backlinks either follow or nofollow for no reason and if you want a backlink then do a proper comment that can educate users. We're here to share not to create backlinks.
Again you have used the same chunk of keyword in your comment!..
nice article but how to put this under header
Really i love this navigation style and i think it would look amazing on my biology niche website after some tweak. But one thing that is sure all credits goes to the most talented syed bhai. once again thanks for providing this wonderful widget.
One request more would you please provide a template like blogtipsntricks having a static homepage like websites for bloggger.
Regards
Vishal Srivastava
Howtobio network.
I loved the navigation bar . Syed bro , I would let you know that your syntax highlighter is not proper . The HTML is code is overlapping with hthe background
This Is not working friend :(
help me !
Thanks! However, its working fine at our End
Add it just under Header-WRAPPER
Thanks for the nice comment. We will soon Come up with a Static Homepage very sooner Peace.
Can you Tell in details what problem you're having
this is awesome man nice work...
Friend I need A big Help I mean I want To Customize This To My blogger Size. first Have a look At This Picture This is what Happened When i add this..
http://i1261.photobucket.com/albums/ii595/isuru007/PleaseHaveAlook_zps3cbe43de.png
I want to Remove The "Search" Thumbnail And add "Music" Thumbnail above The "FB Covers". Please Help Me to Do this.
and i want to remove "Help" , "Get Help" , "My bloggerlab"
the last thing is Hover Color i mean the shadow Every thumbnail Hover Must be Black.. Just Like "Youtube" Thumbnail Hover(shadow)
Hope You'll Accept My Kindly Request !
Please...!
The Widget is Hiding because you have added the coding in the Layout. Try to add the coding in Your Template.
Secondly, To Remove, Search, Music, Get Help and MyBloggerLab Remove the Following Coding.
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn" alt="" />
<span class="light-text">Get HELP</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://www.mybloggerlab.com" class="gradient">
<img src="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
Third and the Last Thing, You can Change the Shadow To Black By Replacing
shadow-red, shadow-blue, shadow-green with shadow-black
Hope That Answers your Question. Peace
We have Answered Your Query! peace
Here Is the Thing i needed now
How to add this Before Begins The posts By using edit HTML ?
where should i paste this code ?
Paste the Coding under your Navigation coding!
simply awesome! I think I will apply that to my blog
Pls help me. i want to put this menu in center position but it alway align to left.
cool .Product of long hours work,r8?
Hello sir
already have this full template downloaded by templatism. I want to ask a question !
I already have a navigation drop down menu and want to use this metro ui navigation menu to link it to my facebook page,twittter page ,feeds page.. etc.
But the thumbnails are fixed and i can't change these Home,Wishlish, Accout..
my html- http://prntscr.com/yetrc
Thanks Sir please help me !
Sorry dude, we are not supporting customization.
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.