নিজের ওয়েব সাইটের আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২

আজ টিউটোরিয়াল বিডিতে CSS বিভাগের পোষ্ট গুলো ঘুরে দেখতে ছিলাম। এখানে অসীম ভাই একটা পোষ্টে আমার চোখ আটকে যায়। পোষ্ট’টা হল, “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে” পোষ্টা আমার খুব ভালো লাগে। তাই এই টিউটোরিয়ালটা লিখতে বসলাম। আরও একটা ইচ্ছা আছে আমি শুধু কদিন ধরে ফটোশপ নিয়েই লিখছি। তাই অনেকে ভাবতে পারেন আমি অক্ষর জ্ঞান শূন্য থুক্কু প্রোগ্রামিং জ্ঞান শূন্য এটা গাধা আসলে তা নয় (আসলে তাই প্রোগ্রামিং এর তেমন কিছুই শিখতে পরি নাই)।

এখানে আমরা দুই ধরনের কোড ব্যাবহার করবো। CSS ও HTML আর এই দুটোই ওয়েব প্রোগ্রামিং কোড। ঠিক আছে কাজে নেমে যাই।

১. প্রথমে একটা ফোল্ডার তৈরি করুন। তারপর, এই লিং থেকে ইমেজের ফাইল গুলো নামিয়ে নিন। এবং images ফোল্ডারটা Extract করে আপনার তৈরিকৃত ফোল্ডারে কপি করে রাখুন।

২. এবার আমরা আমাদের HTML ফাইলটা তৈরি করে ফেলি। তার জন্য All Programs>Accessories>Notepad গিয়ে নোটপ্যাড ওপেন করুন এবং নিচের কোড গুলো কপি করে ফেলুন। তা অবশ্যই ঐ ফোল্ডারে আর HTML ফরমেটে শেভ করতে হবে। HTML ফরমেটে শেভ করার জন্য Save As.. এ ক্লিক করে .txt জায়গায় .html লিখে দিন আর এই ফাইলের নাম দিন index অন্য নাম ব্যাবহার করলেও সমস্যা নাই।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="nav-container-outer">

<img src="images/nav-bg-l.jpg" alt="" class="float-left" />

<img src="images/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>

<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>

<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Quality</a>

<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Services</a>

<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>

<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear">&nbsp;</li></ul>

</div>

</body>

</html>

৩. এবার আমরা CSS ফাইল তৈরি করবো তার জন্য নোটপ্যাড ওপেন করুন এবং নিচের ফাইল গুলো এটাতে কপি করে ফেলুন। এটাকে CSS ফরমেটে শেভ করতে হবে। তার জন্য Save As.. এ ক্লিক করে .txt জায়গায় . CSS লিখে দিন আর এই ফাইলের নাম দিন style অন্যনাম ব্যাবহার এলাও আছে কোন সমস্যা নাই।

এবার index ফাইলটা যে কোন ব্রাউজার দিয়ে ওপেন দেখুন নিচের মত লাগছে।

@charset "utf-8";

/* CSS Document */

body{

padding: 25px;

}

/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(images/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}

/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(images/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}

#nav-container a:hover{

color: #6C3600;

background: url(images/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}

/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(images/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}

/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(images/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}

/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(images/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}

/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(images/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}

/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}

/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

আর হ্যাঁ মেনুটা কেমন হয়েছে বলতে ভুলবেন না কিন্তু। একটা বিখ্যাত সাইটের মেনু দেখে বানিয়েছি।

এত কিছু আপলোড করলাম আবার পুরো ফাইটা বাদ দেই কেন? এটাও এখানে দিলাম।

30 thoughts on “নিজের ওয়েব সাইটের আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২”

  1. ভালো হয়েছে , তবে আমার মনে হয় এটা কাজে লাগবে না কারন সফটওয়ার দিয়ে এর চেয়ে অনেক সুন্দর ডিজাইন করা যায়, HTML দিয়ে কিভাবে সাইট বানাতে হয় এ নিয়ে লিখলে ভালো হয়

  2. @sam azgor: না ভাইয়া এটা ফ্রি ব্লগারেও কাজ করবে। তার জন্য ইমেজ ফাইলের সবগুলো ছবি কোথাও আপলোড করুন তারপর CSS অংশে ছবির নমের জায়গায় ছবির লিং গুলো বসিয়ে দিতে হবে। যেমন ইমেজ ফোল্ডারে দেখুন nav-bg নামে এটা ইমেজ আছে এটার লিং “images/nav-bg.jpg” এর জায়গায় বসিয়ে দিন, পর এক এক করে সব গুলোর নামের জায়গায় লিং বসিয়ে দিন। তারপর CSS কোডটুকু ]]> এর ওপর অথবা নিচে বসিয়ে দিন। টেম্পলেট শেভ করুন এবং HTML কোড গুলো HTML/JavaScript গ্যাজেটে কপি করে ফেলুন আশা করি কাজ হয়ে যাবে।

  3. @rm2334 একমত হতে পাররাম না। সফটওয়্যারও তো এই কোডগুলোই তৈরী করে। আপনি নিজের ইচ্ছা মতো মেনু বানাতে চাইলে বা মেনু বানানোর সফটওয়্যার বানাতে চাইলে এই বেসিক বেপারগুলো জানতে হবে। আমি মনে করি সব কিছু কাষ্টমাইইজড সফট দিয়ে না করে নিজে কিছু কিছু মৌলিক বেপার জেনে নিলে ভাল কাজ করা যায়।

    শিবলীকে অনেক অনেক ধন্যবাদ।

  4. @rm2334: আমার লেখা মূলত প্রফেশনাল দের জন্য হয়ে গেছে। তবে আমি আগের মন্তব্য বলেছি কি ভাবে একটা সাইটে লাগানো যায়। আর সফটওয়ার গুলো কারণে কোডিং এর দাম দিন দিন কমছে। কিন্তু একটা মানতেই হবে, সফটওয়ার গুলো ব্যাবহার করে তৈরি মেনু কিংবা পুরো সাইট তৈরি করলে কিন্তু আপনি কাস্টমাইজড করতে পারবেন না {মানে কাস্টমাইজড করলে সামান্য হলেও খাপছাড়া লাগবে}।
    হ্যাঁ লেখা যায়।

  5. বুঝলাম না, আমার টা হইলো না ক্যান? এনিওয়ে, ওয়ার্ড প্রেসে ড্রপডাইন লিস্ট বানাবো ক্যামনে বা এইটারেই ক্যামনে ওয়ার্ড প্রেস ক্যামনে অ্যাপ্লাই করা যায়, একটু জানাইলে কৃতজ্ঞ থাকব।

  6. ভাই আমি একটা ফ্রী ব্লগ তৈরি করতেছি এখানে কিছু পত্রিকার লিং দিয়েছি, লিং কে ক্লিক করলে পেইজ নতুন ট্যাব এ ওপেন না হয়ে একই ট্যাব এ ওপেন হয়। আমি যাচ্ছি নতুন ট্যাব এ ওপেন হতে। উত্তর টা দিলে উপকৃত হব।

    1. @এফ,এম,রুবায়েত, ওটার HTML কোড আদালা হবে।

      <a href=”আপনার লিং” target=”_blank”>আপনার লেখা!</a>

      এখানে যেখানে আপনার লিং লিখেছি এখানে আপনি লিং দিবেন আর যে খানে আপনার লেখা লিখেছি সেখানে মানে লিং যেই লেখাটার হবে সেটা!

        1. @rm2334, আমি link এর বাংলা বানান লিং অনেক জায়গায় দেখেছি এবং আমি এটাই ব্যাবহার করি। তবে ভবিষ্যততে এই বানান ব্যাবহার করবো না। ধন্যবাদ।

  7. খুব সুন্দর হয়েছে। আপনার মেনু বারটি। কিন্তু আপনি এত অল্প বয়সে এত কিছু শিখলেন কিভাবে? আমার কাছে এগুলোতো অনেক কঠিন মনে হয়।

  8. Ekhane jara lekha post kore tara 1kbaro vabe na je notunder jonno 1tu venge venge bujate hoy.
    Ami ai barti amar blog e pete chai ki korbo. Buji nato lekhata kothay likhe save kobo?? Kivabe korbo?? Help me. Help me?? Plz.

Leave a Comment