HTML ও CSS দিয়ে ড্রপ ডাউনের ভিতর ড্রপ ডাউন তৈরি করা যায় কিভাবে?

HTML ও CSS দিয়ে ড্রপ ডাউনের ভিতর ড্রপ ডাউন তৈরি করা যায় কিভাবে?
রবিবার, ১৩ জুন, ২০২১


আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে কিভাবে দুই সেকশনের বা তার বেশি ড্রপ ডাউন মেনু তৈরি করা যায়।

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 সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।






Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.
I have a blog for learning web design, the name of that website, Freemium WIKI and main blog WikiJana.Com.