আমি আগের একটি টিউটোরিয়ালে দেখিয়ে ছিলাম কিভাবে একটা আকর্ষনীয় নেভিগেশন বার তৈরি করা যায়। আজ আমরা কিভাবে শুধুমাত্র HTML আর CSS দিয়ে আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করা যায় দেখব।
আমরা একটু দেখে নেই আসলে আমরা কি তৈরি করতে যাচ্ছি।
প্রথমে Desktop এ একটা Filder নিয়ে নাম দেই Dropdown । Dropdown Filder এর মধ্যে আবার একটা Filder নিয়ে নাম দেই images । এখন নিচের ov.gif image দুটো copy করে images Filder এর মধ্যে রাখি ।
এখন আমরা Dropdown Filder এর মধ্যে একটা নোটপ্যাড open করে নিচের code টুকু লিখি।
<!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" xml:lang="en" lang="en">
<head>
<title> CSS Drop Down Menu</title>
</head>
<body>
<div id="navcont">
<div id="nav">
<ul>
<li class="borderleft"><a href="#">HOME</a></li>
<li class="borderleft"><a href="#">ABOUT US</a></li>
<li class="borderleft"><a href="#">TUTORIAL</a>
<ul>
<li class="top"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP/Mysql</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">ELECTRONICS</a>
<ul>
<li><a href="#">BASIC</a></li>
<li class="top"><a href="#">ANALOG </a></li>
<li><a href="#">DIGITAL</a></li>
<li><a href="#">MICROCONTROLLER</a></li>
<li><a href="#">PROJECT</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">TEMPLATE</a>
<ul>
<li class="top"><a href="#">WORDPRESS</a></li>
<li><a href="#">JOOMLA</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">BLOGGER</a></li>
<li><a href="#">DRUPAL</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">TECHNOLOGY</a></li>
<li class="borderleft"><a href="#">EDUCATION</a></li>
<li class="borderleft"><a href="#">NEWS</a></li>
<li class="borderleft"><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</body>
</html>
এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করি । save করা index.html ফাইলটি Internet explorer দিয়ে open করলে নিচের মত দেখাবে।
অমরা এখন index.html এর head ট্যাগের মধ্যে css যুক্ত করব। এ জন্য আমরা head ট্যাগের মধ্যে নিচের code টুকু লিখি।
<style type="text/css">
*{margin:0; padding: 0;}
body { background:#444;}
#navcont { margin-top:20px;
width: 100%;}
#nav { background:url(images/un.gif) repeat-x ;
font-family: Verdana;
position:relative;
width:910px;
height:36px;
font-size:14px;
color:#000;
margin: 0 auto;
font-weight:bold}
#nav ul {list-style-type:none; }
#nav ul li {float:left;
position: relative;}
#nav ul li a {padding:10px; display:block;
text-decoration:none;
text-align:center;
color:#000;}
#nav ul li a:hover {background: #12aeef url(images/ov.gif) repeat-x; color: #999;}
#nav ul li ul {display: none;}
#nav ul li:hover ul {display: block;
position: absolute;
top:35px;
min-width:190px;
left:0;}
#nav ul li:hover ul li a {display:block;
background: #6CC ;
color:#000;
width: 160px;
text-align: center;
border-bottom: 1px solid #f2f2f2; border-right: none;
border:1px solid #333}
#nav ul li:hover ul li a:hover { background:#6dc7ec url(images/ov.gif);
color:#000; margin:1px auto 1px 15px;
border:1px solid #000}
</style>
তাহলে আমাদের সম্পূর্ণ code হচ্ছে ,
<!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" xml:lang="en" lang="en">
<head>
<title> CSS Drop Down Menu</title>
<style type="text/css">
*{margin:0; padding: 0;}
body { background:#444;}
#navcont { margin-top:20px;
width: 100%;}
#nav { background:url(images/un.gif) repeat-x ;
font-family: Verdana,;
position:relative;
width:910px;
height:36px;
font-size:14px;
color:#000;
margin: 0 auto;
font-weight:bold}
#nav ul {list-style-type:none; }
#nav ul li {float:left;
position: relative;}
#nav ul li a {padding:10px; display:block;
text-decoration:none;
text-align:center;
color:#000;}
#nav ul li a:hover {background: #12aeef url(images/ov.gif) repeat-x; color: #999;}
#nav ul li ul {display: none;}
#nav ul li:hover ul {display: block;
position: absolute;
top:35px;
min-width:190px;
left:0;}
#nav ul li:hover ul li a {display:block;
background: #6CC ;
color:#000;
width: 160px;
text-align: center;
border-bottom: 1px solid #f2f2f2; border-right: none;
border:1px solid #333}
#nav ul li:hover ul li a:hover { background:#6dc7ec url(images/ov.gif);
color:#000; margin:1px auto 1px 15px;
border:1px solid #000}
</style>
</head>
<body>
<div id="navcont">
<div id="nav">
<ul>
<li class="borderleft"><a href="#">HOME</a></li>
<li class="borderleft"><a href="#">ABOUT US</a></li>
<li class="borderleft"><a href="#">TUTORIAL</a>
<ul>
<li class="top"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP/Mysql</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">ELECTRONICS</a>
<ul>
<li><a href="#">BASIC</a></li>
<li class="top"><a href="#">ANALOG </a></li>
<li><a href="#">DIGITAL</a></li>
<li><a href="#">MICROCONTROLLER</a></li>
<li><a href="#">PROJECT</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">TEMPLATE</a>
<ul>
<li class="top"><a href="#">WORDPRESS</a></li>
<li><a href="#">JOOMLA</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">BLOGGER</a></li>
<li><a href="#">DRUPAL</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">TECHNOLOGY</a></li>
<li class="borderleft"><a href="#">EDUCATION</a></li>
<li class="borderleft"><a href="#">NEWS</a></li>
<li class="borderleft"><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</body>
</html>এখন save করে index.html ফাইলটি Internet explorer দিয়ে open করলে আমরা পূর্ণাঙ্গ ড্রপ ডাউন মেনুটি আমরা দেখতে পাব।
*** আমরা যেখানে # চিহ্ন ব্যবহার করেছি সেখানে আমরা প্রয়োজনীয় পেজের url লিখে লিংক যুক্ত করলে ড্রপ ডাউন মেনুটি সঠিকভাবে কাজ করবে।
ভাল বা মন্দ যাই হোক না কেন সকলের মতামতের প্রত্যাশায় রইলাম।
আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।
সাম্য ভাই জাভাস্কিপ্টটা এখনো ভালভাবে রপ্ত করতে পারিনি। তাইতো মাছের তেলেই বেগুন ভাজলাম।
আশাকরি সহজভাবে জাভাস্কিপ্ট দিয়ে কিভাবে এটা করা যায় একটা টিউন করবেন।
ধন্যবাদ
শুভকামনা রইল।
অসিম ভাই এ টিউন টা আমি আগে টিউটোরিয়াল বিডিতে পড়েছিলাম , টিটি তে প্রকাশ করার জন্য ধন্যবাদ ।
ফাহিম রেজা বাঁধন, আতাউর রহমান এবং দুঃসাহসী টিনটিন ভাই সবাইকে ধন্যবাদ।
সবার জন্য শুভকামনা রইল।
খুব সুন্দর হয়েছে তবে রেসপনসিপ হলে আরও ভালো হতো। ধন্যবাদ ভাই। পরবর্তী টিউনের আশায় রইলাম।
![ওয়েব ডেভেলপমেন্ট [পর্ব-04] : আজকে তোমার নিজের একটি ওয়েব সাইট তৈরি করে ফেলো – সর্ম্পূন কোর্সটি টেকটিউনস হবে](https://dnc.techtunes.io/tDrive/tuner/2023/08/techtunes_01f6feba7bcbe1321a06d926a82a2f80-368x207.jpg "ওয়েব ডেভেলপমেন্ট [পর্ব-04] : আজকে তোমার নিজের একটি ওয়েব সাইট তৈরি করে ফেলো – সর্ম্পূন কোর্সটি টেকটিউনস হবে")
![Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট](https://dnc.techtunes.io/tDrive/tuner/ashim/324126/1uno.png "Arduino শিখুন এক্সক্লুসিভ প্রজেক্ট তৈরি করুন [পর্ব-১১] :: ভিডিওতে Arduino বেসিক-৪ (L293D মটর ড্রাইভার IC সম্পর্কে আলোচনা ) | কোর্সটিতে সক্রিয় অংশগ্রহণের মাধ্যমে আপনিও পেতে পারেন টেকটিউনস ভেরিফায়েড সার্টিফিকেট")
জব্বর হইছে সাথে আবার কোড