Stylish Windows 8 Style Menu Bar For Blog And Website

There are many stylish Menu Bar For Web and Blogs available over internet to let your user to navigate and explorer your blog and website fully from main page so if you will go with an stylish menu bar then it can increase your pageviews also.

So here we have Windows 8 Style Menu Bar For Blog And Website that look like Metro Style Menu Bar For Blog And Website using pure CSS and icons only. You can add your desired menu items also and can change images etc so check out our live DEMO and then gar the code from below and use it.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

<style>
#boxes {
width: 970px;
height: 200px;
margin:0 auto;
background-color:#efefef;
}
#boxes img {
margin-bottom:10px;
}
#menu-one {
float:left;
width: 200px;
height: 200px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #00BBE2;
text-decoration:none;
line-height:200px;
}
#menu-one:hover{
box-shadow:0px 0px 6px 3px #e570e7;
-webkit-box-shadow:0px 0px 6px 3px #e570e7;
-moz-box-shadow:0px 0px 6px 3px #e570e7;
-o-box-shadow:0px 0px 6px 3px #e570e7;
-ms-box-shadow:0px 0px 6px 3px #e570e7;
}
#menu-two {
float:left;
width: 150px;
height: 90px;
margin-left:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #2C84EE;
text-decoration:none;
line-height:90px;
}
#menu-two:hover{
box-shadow:0px 0px 6px 3px #CD6A51;
-webkit-box-shadow:0px 0px 6px 3px #CD6A51;
-moz-box-shadow:0px 0px 6px 3px #CD6A51;
-o-box-shadow:0px 0px 6px 3px #CD6A51;
-ms-box-shadow:0px 0px 6px 3px #CD6A51;
}
#menu-three {
float:left;
width: 120px;
height: 95px;
margin-left:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #E51400;
text-decoration:none;
line-height:90px;
}
#menu-three: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;
}
#menu-four {
float:left;
width: 180px;
height: 95px;
margin-left:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #FF3399;
text-decoration:none;
line-height:90px;
}
#menu-four:hover{
box-shadow:0px 0px 6px 3px #CCCC00;
-webkit-box-shadow:0px 0px 6px 3px #CCCC00;
-moz-box-shadow:0px 0px 6px 3px #CCCC00;
-o-box-shadow:0px 0px 6px 3px #CCCC00;
-ms-box-shadow:0px 0px 6px 3px #CCCC00;
}
#menu-five {
float:left;
width: 120px;
height: 95px;
margin-left:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #FB8F02;
text-decoration:none;
line-height:90px;
}
#menu-five:hover{
box-shadow:0px 0px 6px 3px #FF3399;
-webkit-box-shadow:0px 0px 6px 3px #FF3399;
-moz-box-shadow:0px 0px 6px 3px #FF3399;
-o-box-shadow:0px 0px 6px 3px #FF3399;
-ms-box-shadow:0px 0px 6px 3px #FF3399;
}
#menu-six {
float:left;
width: 150px;
height: 95px;
margin-left:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #67B239;
text-decoration:none;
line-height:90px;
}
#menu-six:hover{
box-shadow:0px 0px 6px 3px #FF00FF;
-webkit-box-shadow:0px 0px 6px 3px #FF00FF;
-moz-box-shadow:0px 0px 6px 3px #FF00FF;
-o-box-shadow:0px 0px 6px 3px #FF00FF;
-ms-box-shadow:0px 0px 6px 3px #FF00FF;
}
#menu-seven {
float:left;
width: 120px;
height: 95px;
margin-left:10px;
margin-top:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #016C38;
text-decoration:none;
line-height:90px;
}
#menu-seven:hover{
box-shadow:0px 0px 6px 3px #ff0000;
-webkit-box-shadow:0px 0px 6px 3px #ff0000;
-moz-box-shadow:0px 0px 6px 3px #ff0000;
-o-box-shadow:0px 0px 6px 3px #ff0000;
-ms-box-shadow:0px 0px 6px 3px #ff0000;
}
#menu-eight {
float:left;
width: 150px;
height: 95px;
margin-left:10px;
margin-top:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #CDCD00;
text-decoration:none;
line-height:90px;
}
#menu-eight: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;
}
#menu-nine {
float:left;
width: 120px;
height: 95px;
margin-left:10px;
margin-top:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #5F0000;
text-decoration:none;
line-height:90px;
}
#menu-nine: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;
}
#menu-ten {
float:left;
width: 180px;
height: 95px;
margin-left:10px;
margin-top:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #D02090;
text-decoration:none;
line-height:90px;
}
#menu-ten: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;
}
#menu-eleven {
float:left;
width: 150px;
height: 95px;
margin-left:10px;
margin-top:10px;
color:#fff;
font: 15px Arial;
text-align:center;
background-color: #CD5B45;
text-decoration:none;
line-height:90px;
}
#menu-eleven: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;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>

HTML:

<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!-- Windows 8 Menu By EXEIdeas DIV Start -->
<div id='boxes'>

<a href="#" id="menu-one" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-C8j-ztEKXmQ/V0fgu2PhfVI/AAAAAAAAibw/kOCUwTQar5YMzLU_DNu2VrWDXOyz2U4vwCCo/s512/Windows-Metro.png" width="48px" height="48px"alt="">
HOME
</a>

<a href="#" id="menu-two" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-vilD6ZmGgvA/V0fgvOsrKAI/AAAAAAAAib0/ISwfkrOEUd4IaOS6DdkxCeivWhRbR_mhgCCo/s512/Youtube-Red-Metro.png" width="48px" height="48px"alt="">
FaceBook
</a>

<a href="#" id="menu-three" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-eX-hAYuHpFw/V0fgtPE_hDI/AAAAAAAAibY/dlVPVDDTEY8NWnOsjvJyTmi8vm9DsOcYACCo/s512/Email-Chat-Metro.png" width="48px" height="48px"alt="">
Twitter
</a>

<a href="#" id="menu-four" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-efEsdgzMNH8/V0fgtHK8znI/AAAAAAAAibc/qSNXM80f7v087nanh1HIuFIEfvjI8RGpQCCo/s512/Google-Blogger-Metro.png" width="48px" height="48px"alt="">
Google+
</a>

<a href="#" id="menu-five" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-nysDizbYg6s/V0fgtNFffSI/AAAAAAAAibU/msAH6SHH7QYNzf7jnCAjmt2DeJNvKyiNACCo/s512/Internet-Explorer-Metro.png" width="48px" height="48px"alt="">
YouTube
</a>

<a href="#" id="menu-six" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-64IJXZCFVQ0/V0fgtsXPGqI/AAAAAAAAibg/BrBn2RuDejA2GO7JwX-wDIUaGFUtsD2tACCo/s512/Ms-Office-Metro.png" width="48px" height="48px"alt="">
Blog
</a>

<a href="#" id="menu-seven" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-4CEdZ3G6M8A/V0fhk4Fj7OI/AAAAAAAAicA/fXIT13EjF-cv1R310YmaYvOxvwjw-RcpACCo/s512/Picasa-Purple-Metro.png" width="48px" height="48px"alt="">
RSS
</a>

<a href="#" id="menu-eight" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-4dw8qqD47Q8/V0fguSzWfgI/AAAAAAAAibk/sc2j-Ep-5z4LEy1uRzuyvLKF1w0e1eqCgCCo/s512/Rss-Feed-Metro.png" width="48px" height="48px"alt="">
Sitemap
</a>

<a href="#" id="menu-nine" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-QrGbaCb_NXk/V0fguoj9p6I/AAAAAAAAibs/LmOdiDNUpCURbpsAUnuPWfcKPe9Y4h5VACCo/s512/Vimeo-Metro.png" width="48px" height="48px"alt="">
Project
</a>

<a href="#" id="menu-ten" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-VAmyRpxoU8I/V0fgutP7AVI/AAAAAAAAibo/SILRVlAovq4miYBv3NNDUOIrvRJDAJ6PQCCo/s512/Twitter-Alt-3-Metro.png" width="48px" height="48px"alt="">
About
</a>

<a href="#" id="menu-eleven" class="gradient">
<img align="middle" src="https://lh3.googleusercontent.com/-pov-M84zKi8/V0fgvIc9NdI/AAAAAAAAib4/4aLpB7NbGOYwKZU7FuKBb80UwYSJJ1y5gCCo/s512/Windows-Store-Metro.png" width="48px" height="48px"alt="">
Contact
</a>

</div>
<!-- Windows 8 Menu By EXEIdeas DIV End -->

Customization:

1.) You can change the CSS if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…