LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar / WordPress / WordPress Widgets » Stylish Windows 8 Style Menu Bar For Blog And Website

Stylish Windows 8 Style Menu Bar For Blog And Website

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…

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “Stylish Windows 8 Style Menu Bar For Blog And Website”

  1. Taufeeq Umar says:

    Very beautiful menu bar styles, Thanks for sharing.

  2. The demo link is not working can you please fix that.

  3. I Have Tried This One, And Working Perfect.

    But Could you please tell me whether we can change the code for “Drop-Down” style..

    Please Reply How to make Drop Down Menu With Same Pattern.

    ‘Thanks And Great Post!

    • EXEIdeas says:

      Welcome here and thanks for using our snippet and sharing your view. Can you let us see any DEMO content or screenshot define yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *