منوی شناور در 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:
- منوی شناور
- منوی کرکره ای
- ساخت منوی سایت
آشنا شدیم.