منوی آبشاری در بوت استرپ یا dropdowns در bootstrap

حتما با منوهای dropdown یا آبشاری آشنا هستید. این دسته از منوها که می توانند بخشی از دکمه ها بوده و یا مستقل از دیگر عناصر باشند، معمولا دارای چندین گزینه ی مخفی هستند و به محض کلیک کاربر روی دکمه یا اولین گزینه، دیگر گزینه ها نیز به صورت آبشار نمایش داده می شوند. در این قسمت می خواهیم منوی آبشاری در بوت استرپ و انواع آن را بررسی کنیم.

منوی dropdown ساده

برای ساخت یک منوی آبشاری ساده باید از کلاس dropdown. برای عنصر نگهدارنده و کلاس dropdown-menu. برای خود منوی آبشاری استفاده کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا برای باز کردن منوی آبشاری از یک دکمه یا لینک با کلاس dropdown-toggle. استفاده کرده ایم و attribute ای به نام "data-toggle="dropdown را نیز به آن داده ایم. از طرفی باید به تک تک موارد این منوی آبشاری کلاس dropdown-item. را نیز اضافه کنید.

جدا سازی لینک ها

اگر بخواهید لینک های داخل منوی آبشاری را با استفاده از یک خط صاف از هم جدا کنید، می توانید از کلاس dropdown-divider. استفاده کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">لینک اول</a>
      <a class="dropdown-item" href="#">لینک دوم</a>
      <a class="dropdown-item" href="#">لینک سوم</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">لینک جدا شده</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهیم به جای استفاده از یک خط صاف برای جداسازی لینک ها از نوشته ای جهت ارائه ی توضیحات به علاوه ی جداسازی استفاده کنیم، باید با کلاس dropdown-header. کار کنیم:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">توضیحات دسته اول لینک ها</h5>
      <a class="dropdown-item" href="#">لینک اول</a>
      <a class="dropdown-item" href="#">لینک دوم</a>
      <a class="dropdown-item" href="#">لینک سوم</a>
      <h5 class="dropdown-header">توضیحات دسته دوم لینک ها</h5>
      <a class="dropdown-item" href="#">لینک جدا شده بعدی</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالت های active و disabled

حالت disabled حالتی است که در آن اعلام می کنیم فلان مورد یا لینک غیرفعال است (می تواند به هر دلیلی باشد) و حالت active حالتی است که نشان دهنده ی فعال بودن (فشرده شدن لینک، قرار داشتن در صفحه ی مورد نظر لینک و ...) آیتم منوی آبشاری ماست. برای ایجاد این حالت ها باید از کلاس های خودشان یعنی active. و disabled. استفاده کرد:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .active class adds a blue background color to the active link.</p>
  <p>The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Normal</a>
      <a class="dropdown-item active" href="#">Active</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

موقعیت دهی به منوی آبشاری در بوت استرپ

شما می توانید منوی خود را در سمت چپ یا راست صفحه قرار دهید؛ برای این کار از کلاس های dropright. و dropleft. استفاده کنید. البته توجه داشته باشید که علامت پیکان به صورت خودکار اضافه می شود:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns - left</h2>
  <p>Add the .dropright class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:</p>
    <br>

  <div class="dropdown dropright">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropright button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>
  <br>
  <br>
  
  <div class="container">
  <h2>Dropdowns - right</h2>
  <p>Add the .dropleft class next to the dropdown menu to left-align the dropdown. Note that the caret/arrows is added automatically:</p>
    <br>

  <div class="dropdown dropleft">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropright button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

موقعیت خروجی منو

می توانید تعیین کنید که منوی آبشاری از کدام قسمت خارج شود (راست یا چپ). مثلا برای اینکه منوی ما از سمت راست باز شود باید از کلاس dropdown-menu-right. استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu.</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Wide dropdown button to demonstrate this example
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین اگر می خواهید این منو به سمت بالا و نه پایین باز شود باید مقدار "class="dropdown را به dropup تغییر دهید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropup button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در ضمن اگر می خواهید استایل گزینه های یک منوی آبشاری در بوت استرپ به حالت عادی و استایل دهی نشده در بیایند (مثلا لینک ها underline بگیرند و آبی شوند) می توانید از کلاس dropdown-item-text. استفاده کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link styling.</p>                                         
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item-text" href="#">Text Link</a>
      <span class="dropdown-item-text">Just Text</span>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

منوهای آبشاری در غالب دکمه ها

برخی اوقات برخی از دکمه ها خود شامل چندین زیر مجموعه هستند و ممکن است شما بخواهید آن ها را به صورت ریزتر به کاربر ارائه کنید. در این حالت بهترین راه استفاده از منوهایی است که درون دکمه قرار می گیرند:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create dropdown menus:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: شما می توانید دکمه ها را از منوی آبشاری شان جدا کنید.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdown Split Buttons</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
  
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نه تنها منو را از دکمه جدا کرده ایم، بلکه رنگ های معنا دار و متفاوتی را نیز به دکمه هایمان اضافه کرده ایم.

دکمه های عمودی

یکی از راه های نمایش دکمه ها قرار دادن آن ها روی هم، به صورت عمودی، است. ما در مثال زیر دقیقا همین کار را کرده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

علی

17 اردیبهشت 1399

سلام. چجوری به وردپرس تبدیل کنیم؟

سما

05 اردیبهشت 1399

سلام وقتتون بخیر من یه سوال داشتم. موقع اجرا منوهای ابشاری برای من باز نمیشن یعنی عملا قسمت آیتم ها نمایش داده نمیشه. با اینکه چندتا کد دیگه رو امتحان کردم ولی همچنان همین مشکل هست. ممنون میشم راهنماییم کنید.

سینا

02 تیر 1398

ببخشید من چن تا سوال دارم اول اینکه چرا توی مثال ها جی کوئری رو اضافه کردین؟ دوم اینکه متوجه نمیشم چطور بوت استرپ با کلاس ها این کار رو می کنه؟ چرا ما باید کلی کد بنویسیم ولی بوت استرپ با اضافه کردن یک کلاس کار رو انجام می ده؟

امیر زوارمی

04 تیر 1398

سلام دوست عزیز، - کتابخانه ی بوت استرپ به جی کوئری نیاز داره برای همین اضافه اش کردیم. البته بوت استرپ از جی کوئری برای پلاگین های جاوا اسکریپتی (مثل tooltip ها و modal ها و...) استفاده می کنه. بنابراین اگر فقط بخواین از خاصیت های CSS بوت استرپ استفاده کنین نیازی به اضافه کردن جی کوئی ندارین. - بوت استرپ فقط با کلاس ها این کار رو نمی کنه. یعنی یک تیم بزرگ نشستن و کلی کد CSS نوشتن و این کد ها رو برای کلاس های خاصی در نظر گرفتن. مثلا من توی stylesheet خودم میگم کلاس toolbar. باید استایل های زیر رو داشته باشه. حالا اگر کلاس toolbar رو به هر عنصری اضافه کنم تمام اون استایل ها روی اون هم اعمال میشه. این از CSS... قابلیت های جاوا اسکریپتی بوت استرپ هم همینطوریه فقط با جاوا اسکریپت نوشته شده و یکم پیچیده تره. شما می تونین کتابخانه ی بوت استرپ رو دانلود کنین و هسته اش رو توی ویرایشگر های کد باز کنین و ببینین کد هاش رو چطوری نوشتن.