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

منوهای کشویی

مؤلفه های چیدمان Bootstrap

در این فصل ، در مورد منوهای کشویی (dropdown menu) بوت استرپ بحث خواهیم کرد. منوهای کشویی قابل تنظیم هستند ، و به صورت منوهای متنی می باشند که برای نمایش لینک ها در فرمت لیست استفاده می شوند. این منوهای کشویی می توانند با پلاگین جاوا اسکریپت کشویی (dropdown JavaScript plugin) به صورت تعاملی ساخته شوند.

برای استفاده از منوی کشویی ، کافی است که منوی کشویی را در کلاس dropdown. قرار دهیم. مثال زیر یک منوی کشویی پایه را نشان می دهد :

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد. با کلیک کردن بر روی گزینه Topics منوی کشویی در زیر آن نمایش داده می شود.

گزینه ها

همتراز کردن

منوی کشویی را می توانیم با اضافه کردن کلاس pull-right. به dropdown-menu. ، در سمت راست صفحه نمایش دهیم. مثال زیر نحوه انجام این کار را نشان می دهد :

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد. با کلیک کردن بر روی گزینه Topics منوی کشویی در سمت راست صفحه نمایش داده خواهد شد.

عناوین

ما می توانیم یک عنوان (header) را جهت برچسب گذاری و طبقه بندی فعالیت ها در هر منوی کشویی اضافه کنیم. این کار را می توانیم با استفاده از کلاس dropdown-header انجام دهیم. مثال زیر نحوه انجام این کار را نشان می دهد :

<div class = "dropdown">
   
   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>
      
      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>
      
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>
   
</div>

خروجی قطعه کد فوق ، به صورت زیر می باشد :