ড্রপ ডাউন মেনু তৈরি করুন

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

ব্লগার যে মেনুবারটি দিচ্ছে, তাতে শুধু স্ট্যাটিক পাতাগুলিরই লিংক দেওয়া যায়। কোন ব্লগপোস্ট বা ইমেইল বা অন্যকোন ব্লগের লিংক দেওয়া যায় না। তাই এখনও আলাদাভাবে তৈরি করা মেনুবারের চাহিদা রয়ে গেছে।

আপনারা যারা বাংলা রোজিনামোহন ব্লগ নিয়মিত ভিজিট করেন, তারা জানেন যে আমি একটি মেনুবার ব্যবহার করি। এই মেনুবারটি একটি বিশেষ বৈশিষ্ট্যসম্পন্ন। এর ড্রপডাউন মেনু আছে, সাথে আছে সাবমেনু। আমি আজকে 'রোজিনামোহন' ব্লগের মেনুবারটি কিভাবে তৈরি করা হয়েছে, তা সবার সাথে শেয়ার করব।

? ব্লগারে লগইন করুন।

? এবার Layout > Edit HTML পাতায় চলে যান।

? সেখানে ]]</b:skin> কোড খুঁজে বের করুন।

? কোডটির উপরে নিচের কোডটি বসিয়ে দিন।

/*
Navigation ----------*/
#NavbarMenu {
background: #A0CFEC;
width: 980px;
height: 34px;
font-size: 12px;
font-weight: bold;
font-family: 'AdorshoLipi', Arial, Tahoma, Verdana;
color: #000000;
margin: 0;
padding: 0;
float:left;
}

#NavbarMenuleft {
width: 690px;
float: left;
margin: 0;
padding: 0;
}

#NavbarMenuright {
width: 285px;
float: right;
margin: 0;
padding: 6px 0 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #2008AF;
display: block;
font-size: 14px;
font-weight: bold;
font-family: Georgia, Times New Roman;
margin: 0;
padding: 5px 10px 5px;
}

#nav li a:hover, #nav li a:active {
color: #000000;
font-weight: bold;
margin: 0;
padding: 5px 10px 5px;
text-decoration: underline;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #A0CFEC;
width: 100px;
color: #2008AF;
font-size: 14px;
font-family: 'AdorshoLipi', Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 3px 4px;
border-bottom: 1px solid #FFF;
}

#nav li li a:hover, #nav li li a:active {
color: #000000;
padding: 3px 4px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
border-left:1px solid #BFC0C0;
}

#nav li ul a {
width: 100px;
}

#nav li ul ul {
margin: -28px 0 0 100px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

উপরের অংশে মেনুটির বিভিন্ন অংশের রঙ পাল্টাতে পারেন।

? এবার নিচের দিকে স্ক্রল করে যান।

? <div id='content-wrapper'> কোড খুঁজে বের করুন।

? কোডটির ঠিক উপরে নিচের কোডটি বসিয়ে দিন।

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Blogging</a>
<ul>
<li>
<a href='http://www.rojinamohan.blogspot.com/search/label/Blogger'>Blogger</a>
<ul>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Tutorial'>Tutotial</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Template'>Templates</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Gadget'>Gadgets</a></li>
</ul>
</li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Wordpress'>Wordpress</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/আমারব্লগ.কম'>আমারব্লগ.কম</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/সামহোয়ারইন'>সামহোয়ারইন</a></li>
</ul>
</li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Linux'>Linux</a>
<ul>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Ubuntu'>Ubuntu</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Puppy'>Puppy</a></li>
</ul>
</li>
<li><a href='#'>More Stuff</a>
<ul>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/E%20Book'>E Book</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/Download'>Download</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/search/label/HTML'>HTML</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/2009/07/blog-post_4349.html'>About</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/2008/08/email-me.html'>E mail me</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/2008/11/blog-post_08.html'>Link to us</a></li>
<li><a href='http://www.rojinamohan.blogspot.com/2009/04/table-of-contents.html'>Table of Contents</a></li>
</ul></li>
<li><a href='http://www.rojinamohan.blogspot.com/'>BH Templates</a></li>
</ul>
</div>
<div id='NavbarMenuright'>
<script src='http://tareq.wedevs.com/bangla_date_widget.php'
type='text/javascript'></script>, <script
type='text/javascript'>
var d=new Date();
var weekday=new Array(7);
weekday[0]="রবিবার )";
weekday[1]="সোমবার )";
weekday[2]="মঙ্গলবার )";
weekday[3]="বুধবার )";
weekday[4]="বৃহস্পতিবার )";
weekday[5]="শুক্রবার )";
weekday[6]="শনিবার )";
document.write(" ( " + weekday[d.getDay()]);
</script>
</div>
</div>

নিজের প্রয়োজনমতো লিংকগুলি ও এ্যাংকর টেক্সটগুলি বদলিয়ে নিন। একটু ধীরে ধীরে সময় নিয়ে করবেন, না হলে সবকিছু এলোমেলো হয়ে যাবে। ন্যাভবারটির ডানপাশে বাংলা তারিখ দেখানোর কোডসহ দেওয়া হল। আপনারা <div id='NavbarMenuright'>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন। লাল রঙ করা কোডগুলো পাল্টিয়ে দিন। আশা করি সমস্যা না করেই সফলভাবে একটি ড্রপডাউন মেনু তৈরি করতে পারবেন।

কোডগুলি ডাউনলোড করার জন্য ক্লিক করুন এখানে।