HTML ও CSS দিয়ে Drop Down কি ভাবে বানাবোঃ
প্রথমে আমাদের HTML টা সঠিক ভাবে লিখতে হবে। HTML এ প্রোবলেম হলে হবেনা।
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Division</a>
<!--প্রথম ড্রপ ডাউন এর লিস্ট-->
<ul>
<li><a href="">Dhaka</a></li>
<li><a href="">Rajshahi</a></li>
<li><a href="">Chittagong</a>
<li><a href="">Khulna</a>
<!--দ্বিতীয় ড্রপডাউনের লিস্ট-->
<ul>
<li><a href="">Meherpur</a></li>
<li><a href="">Jhenaidah</a></li>
<li><a href="">Magura</a></li>
<li><a href="">Jashore</a>
<!-- তৃতীয় ড্রপডাউনের লিস্ট-->
<ul>
<li><a href="">Jhikargachha</a></li>
<li><a href="">Chaugachha</a></li>
<li><a href="">Abhaynagar</a></li>
<li><a href="">Bagherpara</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Help</a></li>
</ul>
</nav>
এবার আমরা CSS দিয়ে ন্যাভ বার টা তৈরি করবো।
body {
margin: 0;
}
html{
background-image: url(bangladesh.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 700px;
background-position: center;
}
nav {
background-color: #000000;
padding: 0px 80px;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
background-color: #000000;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
line-height: 60px;
font-size: 20px;
text-decoration: none;
}
এবার আমরা ড্রপডাউনের জন্য কাজ করবো
/* পজিশনিং এর জন্য*/
nav ul ul {
position: absolute;
top: 60px;
}
/* প্রথম ড্রপডাউনের জন্য */
nav ul ul li{
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* দ্বিতীয় ও তৃতীয় ড্রপডাউনের জন্য*/
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
এবার হাইড এবং সো করাবো
/*সব গুলোকে হাইড করে দিবো এবং হবার করলে বের হবে*/
nav ul ul {
display: none;
}
/* হবার করলে যেগুলো ভিউ হবে */
nav ul li:hover > ul {
display: block;
}
হবার কালার করার জন্য
/* হবার করলে ব্যাকগ্রাউন্ড কালার হবে। */
nav a:hover{
background-color: #ff0000;
}
ব্যাকগ্রাউন্ডে ব্যবহার করা ফটোটি ডাউনলোড করতে নিচে Download এ ক্লিক করুন।
Download Photo
এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।