আমি আগের একটি টিউটোরিয়ালে দেখিয়ে ছিলাম কিভাবে একটা আকর্ষনীয় নেভিগেশন বার তৈরি করা যায়। আজ আমরা কিভাবে শুধুমাত্র 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 লিখে লিংক যুক্ত করলে ড্রপ ডাউন মেনুটি সঠিকভাবে কাজ করবে।
শেষে দুটি কথা:
ভাল বা মন্দ যাই হোক না কেন সকলের মতামতের প্রত্যাশায় রইলাম।
সিএসএস এর ধারাবাহিক টিউটরিয়ালের মধ্যে বেশ কিছু জিনিস বাদ পরে গেছে, ভেবেছিলাম পরে সময় করে লিখবো। মানুষের মন নাকি এক জায়গায় স্থির থাকতে পারে না, তাই বিভিন্ন দিকে ছরিয়ে ছিটিয়ে টিউটরিয়াল লেখা হয়েছে। আশা করি এ টিউটরিয়ালটি সিএসএস এর টিউটরিয়ালগুলোকে সমৃদ্ধ করবে।
আরও কিছু কথা, শিক্ষা বিস্তারের সর্বোত্তম মাধ্যম যেহেতু বই, তাই অফ লাইন লেখকদের বইগুলো অনলাইনের পাঠকদের মাঝ নিয়ে আসার জন্য একটি ব্যপকভিত্তিক কাজ চলছে। আপাতত: http://tutorialbd.com/book এখানে ডিজাইনটি করছি। বই স্ক্যান করে প্রকাশ করার কাজটা সহজ যা অনেকে কিছু কিছু করার চেস্টা করেছে। কিন্ত আমি সবগুলো বই ইউনিকোড চাই, তাই অনেক পরিশ্রম আর অনেক টাইপও করতে হবে। খরচও হবে অনেক। আমি দেখেছি-লেখকদের কাছ থেকে অনুমোতি নেয়াটা যতটা না কঠিন তার চেয়ে বেশি কঠিন এম একটি কাজের সাহসি উদ্দোগ নেয়া ও বিনা লাভে খরচ বহন করা। আপনারা যদি সাথে থাকেন আমি শুরু করতে পারি।
ধন্যবাদ টিউটো ভাই,
ভাল উদ্দোগ, আর সাথেতো সবসময়ই আছি।
ডিজাইনটাও অনেক সুন্দর হয়েছে।
@ashim,নতুন এ কাজ করতে গিয়ে আমাকে টিউটরিয়াল লেখার কাজ অনেক কমিয়ে দিতে হবে। প্রতিনিয়ত ডাটা সংগ্রহ,এন্ট্রি,ইউনিকোডে কনভার্ট করা সহ অনেক কাজ করতে হবে আমাকে। বেশ কিছু লেখকের সাথেও আমার কথা হয়েছে,কয়েকদিন অফলাইনের বেশ কিছু লেখক ও প্রকাশকের সাথে মিশে বুঝতে পারলাম আমার অনলাইনে অনেককিছুই পাই না যা অনলাইনে আনা দরকার। বাঙলাদেশের সেরা ব্যক্তিদের জীবন নিয়ে একটা বই প্রকাশ হয়েছে-“শ্রেষ্ঠ বাঙালী” লিখেছেন “কালাম ফয়েজী” কিছুদিন আগে ঢাকা গিয়ে লেখকের সাথে আমার কথা হলো। তিনি আমাকে তার বইগুলো আমার সাইটে প্রকাশ করার অনুমোতি দিলেন। এসব কাজ করতে গেলে আমাকে অনেক সময় ব্যায় করতে হবে যোগাযোগে। তাই আপনি যদি সাইটটার টিউটরিয়াল নিয়মিত লিখে যান তাহলে অনেক সুবিধা হবে।
আপনার ইউজারকে এডমিন করা হবে যাতে সহজেই মডারেশন সহ অন্যান্য পোস্ট সম্পাদনা করতে পারেন। ধন্যবাদ অসিম ভাই, সাথে থাকার জন্য ।
@টিউটো, ধন্যবাদ টিউটো ভাই , আমার সাধ্যের ১০০ ভাগ দিতে প্রস্তুত আছি। তবে আমার ফাইনাল সেমিস্টার চলতেছে বলে মাঝে মাঝে একটু টিউটোরিয়াল লেখাতে অনিয়মিত হতে বাধ্য হতে হয়।
@ashim, আপনাকে টিউটরিয়ালবিডির এডমিন করা হয়েছে। এ মর্মে একটি ই-মেইলও করা হয়েছে, আশাকরি এতে করে টিউটরিয়ালবিডির পরিসীমা আরও বেড়ে যাবে। আপনি এখন
১. সকল টিউটরিয়াল ও মতামত সম্পাদনা করতে পারবেন।
২. মডারেশনের অপেক্ষারত মতামতগুলো অনুমোদন দিতে,মুছতে বা স্প্যামের তালিকায় পাঠাতে পারবেন।
৩. ডাটা ব্যাকআপ নিতে পারবেন।
৪. এছাড়াও অনেক নতুন নতুন সুবিধাও দেখতে পাবেন এডমিন প্যানেলে।
আপাতত: আপনার উপরেই ছেড়ে দিতে চাই টিউটরিয়ালবিডির টিউটরিয়াল অংশের এডমিনিস্ট্রেশন। তাই আপনি আপনার ইউজারের সিকিউরিটি নিশ্চিত করতে পাসওয়ার্ডটি পরিবতর্ন করে নিন, প্লিজ।
যদিও লেখাগুলো বুঝতে একটু সমস্যা হচ্ছে .একটু কঠিন হয়ে গেছে ।তবুও বলব নতুনদের জন্য অনেক উপকারে আসবে ।
@রুবেল আহমেদ,অসিমের ধারাবাহিক একটি টিউটরিয়াল ছিল যেটাতে সাইটের হেডার বানানোর উপর কাজ করা হয়েছে। আপনি সেই টিউটরিয়াল আর আমার সিএসএস টিউটরিয়াল দেখে নিতে পারেন। আশা করি অনেকটা সুবিধাজনক হবে। মতামত দেয়ার জন্য ধন্যবাদ,বষাস্নাত শুভেচ্ছা।
সুন্দর এবং আকর্ষনীয় নেভিগেশন মেনু।ধন্যবাদ।
@আরমান, আপনাকেও ধন্যবাদ আরমান। আশা করি এটি কাজে লাগবে। অসিমের টিউটরিয়ালগুলো একবারে ভেতর থেকে প্রাথমিক আলোচনা তাই একটু প্যাকটিস করলেই ভাল ওয়েব ডেভলপারের মৌলিক জ্ঞান অজর্ন সম্ভব বলে আমি মনে করি।
ধন্যবাদ টিউটো ভাই এবং আরমান আপনাকে।
সবার জন্য শুভকামনা রইল।
ইতিপূর্বে আপনার কাছ থেকে কিছু শিখে উপকৃত হয়েছি .আজো কিছু শিখতে চাই আশাকরি শেখাবেন ।ধরুন আমার blogspot এ ছবি বা আইকনে ক্লীক করলে কিভাবে লিংক করা যাবে ।যেমনঃ আপনার সাইটে মতামত দিন ক্লীক করলে লিংক পাওয়া যায় ।একটু বুঝিয়ে বলবেন প্লীজ ।আমি যদি পত্রিকার লোগো দিয়ে লিংক করতে চাই সেটা কিভাবে করতে হবে ?
@রুবেল আহমেদ,
আপনি মনে করেন একটা ছবি আপলোড করলেন যার 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></a> দেখবেন কাজ হয়ে গেছে।
আপনি এক কাজ করুন একটা নোটপ্যাড 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></a>
</body>
</html>
এখন file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করেন । save করা index.html ফাইলটি Internet এ সংযুক্ত অবস্থায় Internet explorer দিয়ে open করেন,দেখেন কি হয়।
জেনে ভাল লাগল। খুবই কাজের পোষ্ট। আপনাকে ধন্যবাদ।
আপনাদের এই প্রচেষ্টা এগিয়ে যাক এই শুভকামনা রইল।
@এবিএম মহসিন, এবিএম মহসিন ভাই , আপনাকেও টিউটোরিয়ালবিডির পক্ষ থেকে ধন্যবাদ জানাচ্ছি। আশাকরি টিউটোরিয়ালবিডিতে আপনাকে নিয়মিত পাব।
শুভকামনা রইল।
Filder Ki bujhlam na.
জনাব আপনি ওনেক জিনিস বাদ দিয়ে গেছেন । যেহেতু এইটা টিউটোরিয়ালে সাইট সো সোব কিছু পকাশ করা উচিত। আমি কিছু টিউটোরিয়া লিখতে চাই, আমি কি পারবো।
@Shopon Khan,টিউটরিয়ালবিডিতে আপনাকে স্বাগতম। আপনি চাইলেও টিউটরিয়ালবিডিতে টিউটরিয়াল লিখতে পারেন। http://tutorialbd.com/bn/wp-login.php?action=register এখানে গিয়ে রেজিস্ট্রেশন করে লেখা শুরু করতে পারেন।
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.
আমার হচ্ছেনা। কেউ যদি করা ফাইল আপলোড করে দিতেন। খুবই উপকার হয়।
@sharif, আমারও হচ্ছে না 🙁
Hello brother,
I am very happy because your nav degain for.
এই সাইট টা যে এত উপকারি তা বলে বোঝাতে পারবো না।অসিম কুমার সহ যারা পোস্ট করে তারা যে এত ভাল মানুষ তা বলে বোঝাতে পারবো না।প্রগ্রামিং কে যে এত সহযে বুঝিয়েছেন তা বলাই বাহুল্য।আমি উপকৃত হয়েছি।তবে আমি টিউনার দের যদি সম্ভব হয় তাহলে এন্ডোয়েড এপ্স তৈিরর টিউটোরিয়েল দিলে আধিক উপকৃত হব।উওরের আপেক্ষায় রইলাম