এই মেনুটির উপরে মাউস নিয়ে গেলে আলতো করে আগের লেখার পিছনে থাকা ছবিটি সরে যায়। আসলে এই মেনুটিতে গুগল এর এজাক্স দিয়ে একটি অন্যরকম ভালোলাগার মতো সৌন্দর্য সৃষ্টি করা হয়েছে।

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারে লগইন করুন।
• Layout > Edit HTML অংশে যান। এখানে ]]></b:skin> এর ঠিক উপরে নিচের কোড স্থাপন করুন।

• .container {
  width: 520px;
  height: 100px;
  position: absolute;
  top: 10%; left: 60%;
  margin: 0px 0 0 -80px;
  overflow: hidden;
  }
  img {border: none;}
  ul#topnav {
  margin: 10px 0 20px;
  padding: 0;
  list-style: none;
  font-size: 1.1em;
  clear: both;
  float: left;
  width: 520px;
  }
  ul#topnav li{
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
  height:40px;
  }
  ul#topnav a, ul#topnav span {
  padding: 10px 10px;
  float: left;
  text-decoration: none;
  color: #fff;
  clear: both;
  height: 20px;
  line-height: 20px;
  background: #1d1d1d;
  }
  ul#topnav a { color: #7bc441; }
  ul#topnav span {
  display: none;
  }
  ul#topnav.bh span{
  color: #FF0000;
  background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left top;
  }
  ul#topnav.bh a{
  color: #555;
  background: url(http://4.bp.blogspot.com/_8X8A6_fKD8A/S9CJ2V4UjuI/AAAAAAAAC-o/COPWQ-reKBE/s320/hmenu.png) repeat-x left bottom;
  }

• এখনি সেভ করবেন না। একটু নিচে দেখুন </head> লেখা আছে। এর উপরে নিচের কোডটুকু বসিয়ে দিন।

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

  <script type='text/javascript'>
  $(document).ready(function() {
  $("#topnav li").prepend("<span/>");

  $("#topnav li").each(function() {
  var linkText = $(this).find("a").html();
  $(this).find("span").show().html(linkText);
  });

  $("#topnav li").hover(function() {
  $(this).find("span").stop().animate({
  marginTop: "-40"
  }, 250);
  } , function() { //On hover out...
  $(this).find("span").stop().animate({
  marginTop: "0"
  }, 250);
  });

  });
  </script>

• এবার আরও নিচে নামতে থাকুন। যেখানে <div id='content-wrapper'> লেখা রয়েছে, তার উপরে নিচের কোডগুলো বসান।

• <ul class='bh' id='topnav'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Ubuntu</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Email me</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Tutorial</a></li>
  </ul>

• এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে।  # চিহ্নটির বদলে লিংক লিখুন ও Home, Ubuntu ইত্যাদির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
• এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
• খেয়াল করুনঃ যদি <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> এই অংশটি আগে কোন গেজেট বা মেনুর জন্য ব্লগে থাকে তাহলে নতুন করে আর এই লাইনটুকু ব্লগে বসাতে হবে না।

টিউনটি যদি ভালো লাগে তাহলে ঘুরে আসুন আমার বাংলা ফোরাম থেকে  ক্লিক করে চলে আসুন