Awesome! টিউনস
সকল Awesome! টিউনস

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

3,233 দেখা 12 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডেভেলপমেন্ট
প্রকাশিত
Level 2

147 টিউনস 469 টিউমেন্টস 17 ফলোয়ার

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

শেষে দুটি কথা:

ভাল বা মন্দ যাই হোক না কেন সকলের মতামতের প্রত্যাশায় রইলাম।

এখানে পূর্বে প্রকাশিত

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

জব্বর হইছে সাথে আবার কোড

    Level 2

    ধন্যবাদ প্রোসেসর ভাই!

Level 0

পুরা ক্লাস টিউন,
জাভাস্কিপ্ট দিয়াও করা যায় এটা।

    Level 2

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

    ধন্যবাদ
    শুভকামনা রইল।

Level 0

অসিম ভাই এ টিউন টা আমি আগে টিউটোরিয়াল বিডিতে পড়েছিলাম , টিটি তে প্রকাশ করার জন্য ধন্যবাদ ।

Level 0

ভাল টিউন আপনাকে ধন্যবাদ।

Level 0

নাইস টিউনিং অসীম

Level 2

ফাহিম রেজা বাঁধন, আতাউর রহমান এবং দুঃসাহসী টিনটিন ভাই সবাইকে ধন্যবাদ।
সবার জন্য শুভকামনা রইল।

Level 0

দারুন ভাইয়া…………… ধন্যবাদ।

    Level 2

    ধন্যবাদ।

Level 0

খুবই প্রয়োজনীয়। অনেক ধন্যবাদ।
আশাকরি নিয়মিত টিউন পাব।

Level 0

খুব সুন্দর হয়েছে তবে রেসপনসিপ হলে আরও ভালো হতো। ধন্যবাদ ভাই। পরবর্তী টিউনের আশায় রইলাম।