آموزش فهرست کرکره ای در CSS | آموزش کامل + نمونه کد

قبلی بعدی

منوی شناور در CSS

منوی کرکره ای یا فهرست شناور (dropdown)، با حرکت اشاره گر ماوس بر روی فهرست، نمایش داده می شود.

فهرست (ماوس را روی اینجا حرکت دهید.)

PNLdev

فهرست کرکره ای شامل سه بخش:

دکمه اصلی
فهرست که با حرکت ماوس باز می شود.
تگ والد که شامل دو بخش بالایی می شود.

است.

برای ساخت فهرست کرکره ای، باید:

حتما دکمه اصلی و فهرست در یک تگ والد تعریف شوند.
در حالت پیش فرض، فهرست پنهان شود. (display:none)
به فهرست، position: absolute و به تگ والد، position: relative می دهیم تا بتوانیم موقعیت فهرست را نسبت به والد مقداردهی کنیم.
با استفاده از شبه کلاس hover، روی تگ والد و انتخابگر نسلی، فهرست را نمایش می دهیم. (display:block)

 .dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-btn {
    border: solid 1px red;
    padding: 10px 15px;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 30px;
    z-index: 1;
    min-width: 160px;
    padding: 12px 16px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
    display: block;
}

نکته: به جای استفاده از حاشیه، بهتر است از ویژگی box-shadow استفاده کنیم تا حس شناور بودن را به مخاطب انتقال دهد.

نکته: بهتر است برای دکمه از ویژگی cursor: pointer استفاده کنیم تا شکل ماوس به حالت دکمه نمایش داده شود.

منوی کرکره ای در CSS

با افزودن دکمه به فهرست و افزودن hover به هر کدام از دکمه ها، می توان یک فهرست کامل ساخت.

فهرست (ماوس را روی اینجا حرکت دهید.)

PNLdev

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 30px;
    z-index: 1;
    min-width: 160px;
    padding: 5px 0px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #f1f1f1
}

ساخت منوی سایت با CSS

می توانیم از نمونه کد پایین در منوی سایت استفاده و یک فهرست سایت بسازیم:

* {
    box-sizing: border-box;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: solid 1px #000;
    padding: 10px 15px;
    border-radius: 7px;
}
.menu {
    display: flex;
}
.menu div {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: solid 2px #ffff;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 45px;
    z-index: 1;
    min-width: 160px;
    padding: 5px 0px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #f1f1f1
}
.icons {
    cursor: pointer;
}
.icons i {
    padding: 5px;
}

خلاصه درس

در این درس با فهرست کرکره ای (Dropdown) در CSS:

منوی شناور
منوی کرکره ای
ساخت منوی سایت

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی