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>
        </li></ul>
<STYLE>
#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(http://1.bp.blogspot.com/-JUhuaCgwKV8/TakCkjrqw5I/AAAAAAAAAEg/cGwQSsoqIKg/s1600/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}    
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(http://4.bp.blogspot.com/-I8oro79lVUE/TakCleWKO3I/AAAAAAAAAEk/jDsKRHm2TsM/s1600/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}
#menu .about {
  width: 131px;
  height: 51px;
  background: url(http://4.bp.blogspot.com/-pk_xty4vHkU/TakCjmjp7XI/AAAAAAAAAEY/yJhulD02I7A/s1600/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(http://2.bp.blogspot.com/-0V12pHdp1_I/TakCkYRA_xI/AAAAAAAAAEc/TzsvI06qryY/s1600/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}
#menu .rss {
  width: 112px;
  height: 47px;
  background: url(http://4.bp.blogspot.com/-YEXnPOjTSpE/TakCl_w0ZoI/AAAAAAAAAEo/PpQJq4rsGjY/s1600/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(http://1.bp.blogspot.com/-B7HdmEJ6dV4/TakCmMsgT_I/AAAAAAAAAEs/fduuyLTFrTs/s1600/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}
</STYLE>
Now replace the '#' with your link. And enjoy blogging.

0 comments:

Post a Comment

Powered by Blogger.