আমি আগের একটি টিউটোরিয়ালে দেখিয়ে ছিলাম কিভাবে একটা আকর্ষনীয় নেভিগেশন বার তৈরি করা যায়। আজ আমরা কিভাবে শুধুমাত্র 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 লিখে লিংক যুক্ত করলে ড্রপ ডাউন মেনুটি সঠিকভাবে কাজ করবে।
..................................................................................................
পোস্টটির মূল লেখক টিউটোহোস্ট টিম সদস্য অসিম কুমার
পোস্টটি ইতোপূর্বে এখানে প্রকাশিত
আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।
ami ei website tir moto menu bar banate hole ki korbo.janaben kindly. http://dics09.webnode.com
ধন্যবাদ ভাই।আপনার টিউনটি আমার কাছে খুব ভাল লেগেছে।আশা করি পরবর্তীতে ও এমন ভাল কিছু আমাদের উপহার দেবেন।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
Donnobad tutohost. Priyo tune rakhlam apnake.regular website nia tune chai.