آموزش ساخت منوی کشویی با css

آموزش ساخت منوی کشویی با css

آموزش ساخت منوی کشویی با css

سلام. در این اموزش میخوایم با هم یک drop down menu یا اصطلاحا یک منو ابشاری با استفاده از html و  css  بسازیم که کاربرد بسیار زیادی در طراحی سایت ما داره به صورتی که وقتی موس روی ایکنی که ما میخوهیم میره یک لیست نمایش داده میشه

(توجه کنید ما برای ساخت منو از div ها استفاده کردیم تا هم از لحاظ ساختار با بقیه سایت ما همخونی داشته باشه و همچنین یادگیری اون ساده تر بشه )

خب ابتدا کد ها با استفاده از کد های زیر منو خودتون رو بسازید تا به شرح کد ها بپردازیم.

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

شرح کد html

همان طور که می بینید ابتدا ما یک قسمت کلی برای منو ی خود معرفی کردیم و کلاس آن را dropdown گذاشتیم

بعد از ان یک button  با کلاس dropbtn برای صفحه معرفی کردی که هنگامی که موس روی ان برود لینک ها زیر ان به نمایش در خواهد امد

 

کد های css

<style>

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }


    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        z-index: 1;
    }


    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

 
    .dropdown:hover .dropdown-content {display: block;}


    .dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>

خب منوی ما ساخته شد نتیجه ی کار یک قسمت کوچک در بالای صفحه میباشد که وقتی موس روی ان میرود سه لینک را به ما نشان میدهد. میتوانید با کمی تغیر در html منو انا را به صورت دلخواه خود در بیاوردید و یا لینک های ان را افزایش دهید.

نتیجه ی کار باید به شکل زیر باشد

آموزش ساخت منوی کشویی با css

 

حالا یک منو کاملا به شکل زیر میسازیم

آموزش ساخت منوی کشویی با css

 

کد های html

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</div>

کدهای css

<style>
 
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial;

    }


    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        float: right;
    }


    .dropdown {
        float: left;
        overflow: hidden;
        float: right;
    }


    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0; /* Important for vertical align on mobile phones */
    }


    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }


    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }


    .dropdown-content a:hover {
        background-color: #ddd;
    }


    .dropdown:hover .dropdown-content {
        display: block;
    }

</style>

تمام

خب در این قسمت ما توانستیم با ساختا یک منو ساده اشنا بشیم و همچنین اون را با استفاده از html و css بسازیم

در قسمت های بعد منو های حرفه ای تر با قابلیت واکنشگرایی رو میسازیم

صفحه اصلی

آموزش ساخت منوی کشویی با css

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *