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

আমি আগের একটি টিউটোরিয়ালে দেখিয়ে ছিলাম কিভাবে একটা আকর্ষনীয় নেভিগেশন বার তৈরি করা যায়। আজ আমরা কিভাবে শুধুমাত্র 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 লিখে লিংক যুক্ত করলে ড্রপ ডাউন মেনুটি সঠিকভা
বে কাজ করবে।