এটা আমার প্রথম টিউন, তাই সবার কাছে গঠনমূলক সমালোচনা আশা করছি। আজ আমরা শিখবো কিভাবে CSS Drop Down Menu তৈরি করা যায়।

CSS Drop Down Menu

একজন web developer এর কাছে CSS Drop Down Menu হচ্ছে প্রথম পছন্দ। এবং তা তৈরি করা খুবই সহজ। এর জন্য CSS এর যা জানা প্রয়োজন তা হল,  CSS selectors, floating and contextual positioning ইত্যাদি। আমরা আজকে Step by Step শিখব কি ভাবে খুব সহজে CSS Drop Down Menu তৈরি করা যায়। তাহলে শুরু করা যাক।

Step One: HTML Markup

প্রথম কাজ প্রথম। আমরা HTML এ কিভাবে code লিখব তা এখানে দেখানো হল।

<ul id="navigation">

 <li><a href="#">Home</a></li>
 <li class="sub">

  <a href="#">About</a>

  <ul>

   <li><a href="#">Us</a></li>
   <li><a href="#">Our Work</a></li>
   <li><a href="#">Projects</a></li>

  </ul>

 </li>

 <li>
  <a href="#">Contacts</a>
 </li>

</ul>

যখন কোন User .sub নামের আইটেম এ hover করবে, তখন sub menu টা দেখা যাবে।

Step Two: Main Menu কে Style করা

আমরা প্রথমে menu কে Style করব। আমরা নিশ্চিত করব যাতে শুধু Main Menu এর Direct Child গুলো affected হবে (এখানে direct child বলতে শুধু প্রথম ul এর সব li আইটেম কে বঝাচ্ছে)। আমরা আমাদের Sub menu (যে সকল ul পূর্ববর্তী li এর under এ) বা তার কোন আইটেম কে select করব না, এর জন্য আমরা child selector (>) ইউজ করব।

#navigation {
margin: 0;
padding: 0 1em;
background: #000;
height: 3em;
list-style: none;
}

#navigation > li {
float: left;
height: 100%;
margin-right: 0.5em;
padding: 0 1em;
}

#navigation > li > a {
float: left;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}

#navigation > li > a:hover {
color: orange;
text-decoration: underline;
}


Step Three: contextual positioning তৈরি

এখন আমরা চাই, Sub Menu যাতে সবসময়ে সে যে li এর child, তার বরাবর অবস্থান করে। এর জন্য আমরা
contextual positioning এর সাহায্য নেব।

#navigation > li.sub {
position: relative;
}


Step four: Sub Menu কে Style করা

sub menu কে hide করার জন্য নিচের css টুকু লিখুন।

#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
top: -1000em;
}

#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
}

#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}

#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
}

Step five: Sub Menu কে Show করা

Sub menu কে Show করার জন্য আমরা sub menu এর top property টা adjust করব।

#navigation > li.sub:hover ul {
top: 3em;
}
আপনাদের কাছে আমার এই post টি ভাল লাগলে Comment এর মাধ্যমে জানাবেন, এছাড়া যদি কোন নির্দেশনা থাকে অথবা CSS, HTML, Jquery, PHP, MySQL, ইত্যাদি বিষয়ে কোন কিছু জানার থাকে, আমাকে comment এর মাধামে জানাবেন, আমি অবশ্যই আমার সাধ্যমত চেষ্টা করব আপনাদের কে তা জানাতে। Tune আকারে তা আপনাদের কে উপহার দিতে পারলে আমি অনেক আনন্দিত হব।