021-20483015

کرکره ها در CSS

با CSS می توان یک کرکره ایجاد کرد.
 

کرکره پایه

در مثال زیر کرکره ای که با اشاره ماوس بر روی آن نمایش داده می شود ، ایجاد شده است.

مثال :

کرکره پایه
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
مشاهده مثال



تشریح مثال بالا :
HTML - از هر عنصری مانند <span> یا یک عنصر <button> برای باز کردن محتوای کرکره ای استفاده کنید.
از یک بلوک نگه دارنده مانند <div> برای ایجاد محتوای کرکره ای و هرچه که داخل آن می خواهید قرار دهید ، استفاده کنید.
با استفاده از یک عنصر <div> تمام عناصر مورد نظر را در یک بلوک جمع کرده و با افزودن CSS به آن موقعیت محتوای کرکره ای را تعیین کنید.

CSS - کلاس dropdown. از position:relative استفاده می کند تا محتوای کرکره ای را در قسمت پایین سمت راست دکمه مورد نظر نمایش دهیم. البته خود محتوا نسبت به باکس کرکره ای از position:absolute استفاده می کند.
کلاس dropdown-content. محتوای اصلی را شامل می شود. این محتوا بطور پیش فرض مخفی می باشد  و با اشاره ماوس بر روی دکمه مورد نظر ، نمایش داده می شود. توجه کنید که عرض حداقل بر روی 160 پیکسل تنظیم شده است. می توانید با تغییر آن نتایج دیگری را مشاهده کنید.
نکته ! اگر میخواهید عرض محتوای کرکره ای به اندازه دکمه آن باشد ، باید width را بر روی 100% تنظیم کنید و overflow:auto را به آن اضافه کنید تا در صفحات کوچک ، باقی محتوا توسط اسکرول در دسترس باشد.
بجای صفت border از صفت box-shadow که در CSS3 ارائه شده است ، استفاده کرده ایم تا محتوای کرکره ای را شبیه یک کارت نمایش دهیم.
از سلکتور hover: نیز برای نمایش محتوای کرکره ای به هنگام اشاره ماوس بر روی دکمه ، استفاده شده است.
 

منوی کرکره ای : زیر منوها

بااستفاده از dropdown منوهای کرکره ای ایجاد می کنیم تا کاربر بتواند از گزینه های بیشتری از یک لیست انتخاب کند.
این مثال شبیه مثال قبلی است ، با این تفاوت که به محتوای کرکره ای ، لینک هایی اضافه کرده و به آنها استایل داده ایم تا با دکمه مورد نظر متناسب باشند.

مثال :

منوی کرکره ای
<style>
/* استایل دهی به دکمه کرکره */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* نگه دارنده <div> - برای موقعیت دهی محتوای کرکره ای مورد نیاز است */
.dropdown {
    position: relative;
    display: inline-block;
}

/* محتوای کرکره ای (بطور پیش فرض مخفی است) */
.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 {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* تغییر رنگ لینک های داخل کرکره در حالت اشاره */
.dropdown-content a:hover {background-color: #f1f1f1}

/* نمایش منوی کرکره ای به هنگام اشاره */
.dropdown:hover .dropdown-content {
    display: block;
}

/* تغییر رنگ زمینه دکمه کرکره به هنگام نمایش محتوای کرکره */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<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>
مشاهده مثال

 

محتوای کرکره ای راست چین


اگر میخواهید منو کرکره ای  خود را از راست به چپ ، تبدیل به چپ به راست کنید ;left: 0 را به کد ، اضافه کنید :

مثال :

کرکره راست چین
.dropdown-content {
    right: 0;
}
مشاهده مثال



مثال های بیشتر

تصاویر بزرگ شونده :
چگونگی اضافه کردن  یک تصویر و یک عنصر دیگر در داخل محتوای کرکره ای :

بزرگنمایی تصاویر
.dropdown {
    position: relative;
    display: inline-block;
}

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

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

.desc {
    padding: 15px;
    text-align: center;
}
مشاهده مثال


منوی بازشونده
چگونگی اضافه کردن یک منوی باز شونده در داخل یک نوار ناوبری دیگر :

منوی کشویی داخل نوار ناوبری
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

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

li.dropdown {
    display: inline-block;
}

.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 {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: right;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط