Advanced CSS Menu For Blogger

| |
After my previous tutorial on jQuery Moving Boxes Plugin for Blogger, Today I am going to give a tutorial on Advanced CSS menu. This menu works with pure CSS & doesn't use even a single  piece of JavaScript or jQuery code.
You can view the demo here. Now lets start.

  1. Go to Layout & 'add a gadget'
  2. Select HTML/JAVASCRIPT from the list.
  3. Paste the following code in editor.
 <ul id="menu">
        <li><a href="#" class="home">Home <span></span>
        </a></li> <li><a href="#" class="about">About <span></span>
        </a></li> <li><a href="#" class="rss">RSS <span></span></a>
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  position: relative;
#menu span {
  display: none;
  position: absolute;
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
#menu a:hover {
  background-position: left bottom;
#menu a:hover span {
  display: block;
#menu .home {
  width: 144px;
  height: 58px;
  background: url( no-repeat;
  left: 96px;
  top: 73px;
#menu .home span {
  width: 86px;
  height: 14px;
  background: url( no-repeat;
  left: 28px;
  top: -20px;
#menu .about {
  width: 131px;
  height: 51px;
  background: url( no-repeat;
  left: 338px;
  top: 97px;
#menu .about span {
  width: 40px;
  height: 12px;
  background: url( no-repeat;
  left: 44px;
  top: 54px;
#menu .rss {
  width: 112px;
  height: 47px;
  background: url( no-repeat;
  left: 588px;
  top: 94px;
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url( no-repeat;
  left: 26px;
  top: -20px;
Now replace the '#' with your link. And enjoy blogging.


Post a Comment

Powered by Blogger.