1

I'm trying to show a gear icon and a dropdown menu when it is clicked.

Here's my code, but the dropdown menu is not appearing.

Any ideas what am I doing wrong?

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- jQuery 3.4.1 -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  <!-- Bootstrap 3.4.1 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- Bootstrap 3.4.1 JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
  <div class="dropdown">
    <h4>
      Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i>
    </h4>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <!-- Add more menu items as needed -->
    </ul>
  </div>

</body>

0

2 Answers 2

Reset to default
0

You have a few things not aligned with the docs and good semantic markup:

  • A toggler should be a button. Headings are not clickable elements and shouldn't be used as such, for accessibility.
  • A dropdown menu must be the next sibling of its toggler. This means putting it inside the heading element. Unfortunately, this is also bad from a semantic perspective, so consider refactoring your layout to fix that.
  • Don't omit the ARIA attributes shown in the docs, also for accessibility.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- jQuery 3.4.1 -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  <!-- Bootstrap 3.4.1 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- Bootstrap 3.4.1 JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
  <div class="dropdown">
    <h4>
      Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button>
    
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
    </h4>
  </div>

</body>

2
  • That's great! Thanks for figuring this out! Do you happen to know what needs to change to make the menu appear directly under the gear icon?
    – AvaTaylor
    Commented Nov 13, 2023 at 15:37
  • Ok -- I have something that works for me ... I posted my "final" code as an answer -- thanks very much for the help here! It's much better now.
    – AvaTaylor
    Commented Nov 13, 2023 at 15:53
0

Here's my "final" code, incorporating changes from @isherwood

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- jQuery 3.4.1 -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  <!-- Bootstrap 3.4.1 CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- Bootstrap 3.4.1 JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>

    <div class="d-flex align-items-center">

        <h4 style="display: inline;">Drop down menu test:</h4>

        <div class="dropdown" style="display: inline-block;" >
            <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <i class="bi bi-gear"></i>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownBtn">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>

    </div>

</body>

Not the answer you're looking for? Browse other questions tagged or ask your own question.