Pure CSS navigation menu in Ribbon style for blogger 2015

 Maher Afrasiab  2 years ago  Blogger Tricks, CSS Tricks, Web Developement, Widgets

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.

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

Here is the demo of it:

Demo

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