logo



আমার লেখালেখি



আমার প্রিয় লেখা



আমার ছবিঘর



অনলাইনে আছেন

আব্দুল্লাহ-আল-নোমান এর নতুন বন্ধু নাজমুল


আমাদের সাথে আছেন ৯ জন অতিথী
  

আব্দুল্লাহ-আল-নোমান এর অনলাইন ডায়েরী

আপনাদের সকলের উপর আল্লাহর শান্তি, রহমত এবং বরকত বর্ষিত হোক

ডায়েরী লিখছেন ৭ বছর ৬ মাস ২৫ দিন
মোট পোষ্ট ৬১টি, মন্তব্য করেছেন ১৫৪টি


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

সোনার বাংলা ব্লগে পোস্ট লেখার জন্য Visual Editor না থাকায় মনে হচ্ছিল আমি HTML এবং CSS কোডগুলো প্রদর্শন করতে পারব না । শেষ পর্যন্ত Dreamweaver software টির সাহয্য নিয়ে কাডগুলো প্রদর্শন করতে সক্ষম হয়েছি।
ভাল বা মন্দ যাই হোক না কেন সকলের মতামতের প্রত্যাশায় রইলাম।


সংগ্রহ :- sonarbanglablog.com

২৫৫৫ বার পঠিত

 
০১-০৫-২০১০
আবু জাফর মো: শামসুদ্দিন বলেছেন: খুব সুন্দর নোমান ভাই ফাটাফাটি । কাজ করে দেখলাম ।


০২-০৫-২০১০
সুমাইয়া আক্তার শিমু বলেছেন: আসলেই সুন্দর হয়েছে।


মন্তব্য করতে লগিন করুন।
  

সাম্প্রতিক মন্তব্য







ছবিঘরের নতুন ছবি