Pure CSS navigation menu in Ribbon style for blogger 2015

looking for css navigation menu?Here is the new navigation menu with created pure CSS in ribbon style.
While working in menus previously I have created radial menu and responsive menu. And this time I have created a brand new pure CSS navigation menu in ribbon style.

Also see: Subcribe Box with Pure CSS Social Buttons

This menu will not effect your site load time because the menu is created with pure css and no javascript or jquery used in it.
CSS navigation menu in Ribbon style


This is very simple and easily customizable menu which can be fit on any template.

Here is the demo of it:

Like this widget, let's see how to add it on your blog.

Add It on Blogger


  1. First go to Blogger dashboard >> Template tab
  2. backup your template
  3. click on Edit HTML
  4. Search for  ]]></b:skin> tag 
  5. Just above the ]]></b:skin> tag  paste the below code
#navigation_container {
margin: 0 auto;
width: 900px;
}
#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em 0.8em;
}
#navigation li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0;
line-height: 28px;
}
#navigation li.active a:hover,
#navigation li a:hover {
margin-top: 2px;
}
#navigation li.active {
font-style: italic;
}
#navigation li.active a {
}
.rectangle {
background: #e5592e;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
z-index: 500; /* the stack order: foreground */
margin: 3em 0;
}
.l-triangle-top {
border-color: #d9542b transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
.r-triangle-top {
border-color: #d9542b transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.r-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}


  • Now paste the below code where you want your menu appears. ( mostly at header section).

<!-- container for positioning the banner --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <div id="navigation_container">
<!-- the left side of the fork effect -->    <div class="l-triangle-top"></div>    <div class="l-triangle-bottom"></div> <!-- the ribbon body -->    <div class="rectangle"> <!-- the navigation links -->    <ul id="navigation">         <li><a href="#"><i class="fa fa-home">Home</i> </a></li>         <li><a href="#"> <i class="fa fa-book">About</i></a></li>         <li><a href="#"> <i class="fa fa-cogs">Services</i></a></li>       <li><a href="#"><i class="fa fa-at"> Contact</i></a></li>       </ul> < <!-- end the ribbon body -->    </div> <!-- the right side of the fork effect -->    <div class="r-triangle-top"></div>    <div class="r-triangle-bottom"></div> <!-- end container --> </div>
  • To add more options in menu add the below code just above the </ul>


<li><a href="your link"><i class="fa fa-at"> Your text</i></a></li>

Credits

You are most welcome to share this widget with your own readers but you have to give proper credits to PakMax blog by attaching a link back to this post.

Also see: New Best Free Blogger Templates with Awesome design

From editor's desk

Hope that you easily understand the process of installation and during installation not found any problem. But if you got any problem during installing it on your site or find any bug in the widget then don't worry becuase I am here to solve your problems simply comment below and I will help you as early as possible :)

Well, hope you like this new ribbon styled navigation menu widget for blogger and find it awesome for your blog. I hope that this new widget will new life to your blog and increase your site's uniqueness :).

Don't forget to share this with your friends, fans and followers on your social media and bookmarking profiles. And you may stay Blessed, happy and sucessful :)

Pure CSS navigation menu in Ribbon style for blogger 2015 Pure CSS navigation menu in Ribbon style for blogger 2015 Reviewed by Maher Afrasiab on 3:45:00 pm Rating: 5

No comments:

Powered by Blogger.