Beautiful And Stunning Menu For Your Blog

We are back with a menu which is something like transparent menu.
This menu hasn’t any js, jquery or anything complex.
It’s with html and pure css.
It’ll work on many devices.
This menu will not take many time to load.
This will help your viewers to navigate.
This will look stunning in some contrast matching background and theme.
Live preview of this menu @ here.
Another live preview with changed color @ here.
We are giving this tutorial of the changed color menu.
So How to put in your blog?
# Go to your template and backup it.
# Then click on Edit HTML.
# Seach for </header> and paste below code above it.

<ul class=”seebeeteemenu”>
  <a href=””><li class=”home”>Home</li></a>
  <a href=””><li>Features</li></a>
  <a href=””><li>Support</li></a>
  <a href=””><li>Pricing</li></a>
  <a href=””><li>Blog</li></a>
</ul>

# Change the text which is highlighted with green color as per your need and don’t forget to give link to the all a tags.
# Then search for </b:skin> and expand it and again search for it and just above it paste the below code.

ul.seebeeteemenu *
{
  transition: 0.7s;
}
ul a
{
  text-decoration: none;
  color: black;
ul.seebeeteemenu
{
  font: normal 20px ‘Helvetica’;
  list-style: none;
  background: rgba(0,0,255,.5);
  height: 54px;
  margin: 10px auto;
  border-radius: 7px;
  padding: 0;
}
.seebeeteemenu li
{
  color: white;
  text-align: center;
  width: 85px;
  padding: 15px;
  margin-left: -6.8px;
  border-right: 1px solid rgba(0,0,255,0.5);
  display: inline-block;
}
.seebeeteemenu li.home{margin-left: 1px;}
.seebeeteemenu li:hover
{
  background: rgb(0,0,255);
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  cursor: pointer;
}
.seebeeteemenu li:active
{
  background: #eee;
  color: #000;
  width: 150px;
}

# If this color contrast don’t match your blog then change the color as per your choice and need.
# Now you have successfully added Beautiful and stunning menu to your blog. So enjoy and share this post if you enjoyed reading it.

Any queries related this then just comment or contact us.

Share This Now:

Add a Comment

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