Stitched Menu With PureCSS3

Click to Enlarge

Live Demo

This menu works with pureCSS3 and styled with stiched borders at top and bottom, You can add this to your blogger blog or website,

Just follow this steps,

Html Code

 <ul class="cbtnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Help</a></li>
</ul>  

Now Replace Green Lighted text with Link Location and Yellow Lighted text with Link Name(Label).

Now let's give some style to this menu,
I used Custom font in this menu style, add this with css by copying the below code,

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

If you don't want custom font, then you may optout from above step,
Now copy css from below in blogger template(html),

( Above ]]></b:skin>)

.cbtnav

{
  width: 810px;
  margin: 30px auto;
  list-style: none;
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  background: #000;
  background-image:linear-gradient(top left, #222,#333,#111,#222,#444);
  padding: 15px 0;
  padding-left: 15px;
  box-shadow: 0 -10px 0 #000, 0 10px 0 #000;
}
.cbtnav li
{
  font-family: 'Open Sans' , sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  width: 130px;
  text-align: center;
  border-right:1px solid #fff;
}
.cbtnav li a
{
  text-decoration: none;
  color: white;
  font-size: 18px;
  transition: .4s;
}
.cbtnav li a:hover
{
  color: greenyellow;
  border-bottom: 1px solid greenyellow;
}
.cbtnav li:nth-child(6)
{
  border:none;
}

Copy the above code in blogger template ( above ]]></b:skin>).
And add the html code where you want to show menu (widget/footer/sidebar widget..)
You're done with Awesome Stitched Navigation Menu.

Query

If you have any query / problem then leave comment here, it will be sort out.