নিজের ওয়েব সাইটের আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র 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[/url]</li>
<li class=”borderleft”><a href=”#”>ABOUT US[/url]</li>
<li class=”borderleft”><a href=”#”>TUTORIAL[/url]
<ul>
<li class=”top”><a href=”#”>HTML[/url]</li>
<li><a href=”#”>CSS[/url]</li>
<li><a href=”#”>PHP/Mysql[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>ELECTRONICS[/url]
<ul>
<li><a href=”#”>BASIC[/url]</li>
<li class=”top”><a href=”#”>ANALOG [/url]</li>
<li><a href=”#”>DIGITAL[/url]</li>
<li><a href=”#”>MICROCONTROLLER[/url]</li>
<li><a href=”#”>PROJECT[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>TEMPLATE[/url]
<ul>
<li class=”top”><a href=”#”>WORDPRESS[/url]</li>
<li><a href=”#”>JOOMLA[/url]</li>
<li><a href=”#”>HTML[/url]</li>
<li><a href=”#”>BLOGGER[/url]</li>
<li><a href=”#”>DRUPAL[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>TECHNOLOGY[/url]</li>
<li class=”borderleft”><a href=”#”>EDUCATION[/url]</li>
<li class=”borderleft”><a href=”#”>NEWS[/url]</li>
<li class=”borderleft”><a href=”#”>CONTACT[/url]</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[/url]</li>
<li class=”borderleft”><a href=”#”>ABOUT US[/url]</li>
<li class=”borderleft”><a href=”#”>TUTORIAL[/url]
<ul>
<li class=”top”><a href=”#”>HTML[/url]</li>
<li><a href=”#”>CSS[/url]</li>
<li><a href=”#”>PHP/Mysql[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>ELECTRONICS[/url]
<ul>
<li><a href=”#”>BASIC[/url]</li>
<li class=”top”><a href=”#”>ANALOG [/url]</li>
<li><a href=”#”>DIGITAL[/url]</li>
<li><a href=”#”>MICROCONTROLLER[/url]</li>
<li><a href=”#”>PROJECT[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>TEMPLATE[/url]
<ul>
<li class=”top”><a href=”#”>WORDPRESS[/url]</li>
<li><a href=”#”>JOOMLA[/url]</li>
<li><a href=”#”>HTML[/url]</li>
<li><a href=”#”>BLOGGER[/url]</li>
<li><a href=”#”>DRUPAL[/url]</li>
</ul>
</li>
<li class=”borderleft”><a href=”#”>TECHNOLOGY[/url]</li>
<li class=”borderleft”><a href=”#”>EDUCATION[/url]</li>
<li class=”borderleft”><a href=”#”>NEWS[/url]</li>
<li class=”borderleft”><a href=”#”>CONTACT[/url]</li>
</ul>
</div>
</div>
</body>
</html>
এখন save করে index.html ফাইলটি Internet explorer দিয়ে open করলে আমরা পূর্ণাঙ্গ ড্রপ ডাউন মেনুটি আমরা দেখতে পাব।
*** আমরা যেখানে # চিহ্ন ব্যবহার করেছি সেখানে আমরা প্রয়োজনীয় পেজের url লিখে লিংক যুক্ত করলে ড্রপ ডাউন মেনুটি সঠিকভাবে কাজ করবে।
শেষে দুটি কথা:
ভাল বা মন্দ যাই হোক না কেন সকলের মতামতের প্রত্যাশায় রইলাম।
ট্যাগ: drop down, html, menu, navegation, sub menu, web design, web programming, টিউটোরিয়াল, টেমপ্লেট, সি এস এস, সিএসএস (CSS)
প্রকাশ তারিখঃ মে 18, 2010 সময় 9:16 অপরাহ্ন বিভাগঃ Featured Articles., ওয়েব ডিজাইন, সিএসএস (CSS)
শেয়ার করুন6
লেখক: অসীম কুমার। লেখকের আর এস এস ফিড|http://www.technologybd.com
লেখক একজন ইলেকট্রনিক্সের শিক্ষার্থী। তিনি ইলেক্ট্রনিক্স, এইচটি এমএল, সিএসএস এবং মাইক্রোকন্ট্রোলারের উপর টিউটরিয়াল লিখেছেন। তাছাড়া তিনি বিভিন্ন বিষয়ে শিক্ষির্থীদের পরামর্শ দিয়ে থাকেন। তার ভাষায়, "আমাদের অনেকেরই ধারনা ইলেকট্রনিক্স একটি জটিল বিষয় । আর এ জন্যই আমরা এর গভীরে প্রবেশ করতে চাই না। ফল স্বরূপ আমারা পিছিয়ে যাচ্ছি প্রতি মুহুর্তে।" তিনি বাংলা ভাষায় প্রযুক্তি চর্চাকে এগিয়ে নিতে, "প্রযুক্তি চর্চার মুক্তমঞ্চ "
www.technologybd.com প্রতিষ্ঠা করেছেন।
তিনি আমাদের জন্য 46টি টিউটোরিয়াল লেখেন এবং 60টি মন্তব্য প্রদান করেন। তার স্কোর 3.97% । অসীম কুমার এর পাতায় আপনাদের আমন্ত্রন।
20 টি মতামত | নিজের ওয়েব সাইটের আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে।
sharif on জানুয়ারি 23, 2011 at 1:42 পুর্বাহ্ন
আমার হচ্ছেনা। কেউ যদি করা ফাইল আপলোড করে দিতেন। খুবই উপকার হয়।
জবাব
limon on জুন 30, 2011 at 12:46 পুর্বাহ্ন
@sharif, আমারও হচ্ছে না
জবাব
nayon on নভেম্বর 4, 2010 at 8:38 পুর্বাহ্ন
in your style tag you don’t describe about borderleft & top class, but used in html div tag. why? I am not clear about it.
জবাব
Shopon Khan on অগাষ্ট 14, 2010 at 1:52 অপরাহ্ন
জনাব আপনি ওনেক জিনিস বাদ দিয়ে গেছেন । যেহেতু এইটা টিউটোরিয়ালে সাইট সো সোব কিছু পকাশ করা উচিত। আমি কিছু টিউটোরিয়া লিখতে চাই, আমি কি পারবো।
জবাব
টিউটো on অগাষ্ট 14, 2010 at 2:07 অপরাহ্ন
@Shopon Khan,টিউটরিয়ালবিডিতে আপনাকে স্বাগতম। আপনি চাইলেও টিউটরিয়ালবিডিতে টিউটরিয়াল লিখতে পারেন।
http://tutorialbd.com/bn/wp-login.php?action=register এখানে গিয়ে রেজিস্ট্রেশন করে লেখা শুরু করতে পারেন।
জবাব
Arif on জুন 5, 2010 at 12:19 অপরাহ্ন
Filder Ki bujhlam na.
জবাব
এবিএম মহসিন on জুন 4, 2010 at 12:55 অপরাহ্ন
জেনে ভাল লাগল। খুবই কাজের পোষ্ট। আপনাকে ধন্যবাদ।
আপনাদের এই প্রচেষ্টা এগিয়ে যাক এই শুভকামনা রইল।
জবাব
ashim on জুন 4, 2010 at 2:17 অপরাহ্ন
@এবিএম মহসিন, এবিএম মহসিন ভাই , আপনাকেও টিউটোরিয়ালবিডির পক্ষ থেকে ধন্যবাদ জানাচ্ছি। আশাকরি টিউটোরিয়ালবিডিতে আপনাকে নিয়মিত পাব।
শুভকামনা রইল।
জবাব
রুবেল আহমেদ on মে 29, 2010 at 12:57 অপরাহ্ন
ইতিপূর্বে আপনার কাছ থেকে কিছু শিখে উপকৃত হয়েছি .আজো কিছু শিখতে চাই আশাকরি শেখাবেন ।ধরুন আমার blogspot এ ছবি বা আইকনে ক্লীক করলে কিভাবে লিংক করা যাবে ।যেমনঃ আপনার সাইটে মতামত দিন ক্লীক করলে লিংক পাওয়া যায় ।একটু বুঝিয়ে বলবেন প্লীজ ।আমি যদি পত্রিকার লোগো দিয়ে লিংক করতে চাই সেটা কিভাবে করতে হবে ?
জবাব
ashim on মে 29, 2010 at 9:28 অপরাহ্ন
@রুবেল আহমেদ,
আপনি মনে করেন একটা ছবি আপলোড করলেন যার url হল
http://tutorialbd.files.wordpress.com/2010/03/comments-tutorialbd.jpg এখন আপনি এটার সাথে
http://tutorialbd.com/bn/?p=3667 পেজটাকে লিংক করতে চান তাহলে HTML কোডের মাধ্যমে লিখুন
<a href=”http://tutorialbd.com/bn/?p=3667 ” rel=”nofollow”> <img src=”http://tutorialbd.files.wordpress.com/2010/03/comments-tutorialbd.jpg“></img>[/url] দেখবেন কাজ হয়ে গেছে।
আপনি এক কাজ করুন একটা নোটপ্যাড open করে নিচের code টুকু লিখেন
<html>
<body>
<a href=”http://tutorialbd.com/bn/?p=3667 ” rel=”nofollow”> <img src=”http://tutorialbd.files.wordpress.com/2010/03/comments-tutorialbd.jpg“></img>[/url]
</body>
</html>
এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করেন । save করা index.html ফাইলটি Internet এ সংযুক্ত অবস্থায় Internet explorer দিয়ে open করেন,দেখেন কি হয়।
জবাব
