Click X button to toggle and close the dropdown menu

Question

Click X button to toggle and close the dropdown menu

After successfully creating a responsive menu that toggles with a hamburger icon at 1205px resolution, I encountered an issue. Once the hamburger icon is clicked and the dropdown menu opens, there seems to be no way to close it. I am looking to add an X button for users to easily close the menu once opened. Does anyone have suggestions on how this can be achieved?

html

 <nav class="nav-box">
  <label class="label" for="toggle">
      &#9776;
  </label>
  <input type="checkbox" id="toggle">
    <ul class="f-cb">
        <!-- my menu content -->
    </ul>
 </nav>

CSS

.label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 22px;
    display: none;
    color: #433F3F;
    float: right;
    width: 180px;
}

#toggle {
    display: none;
}
/* menu */

@media only screen and (max-width: 1205px) {

    #form1 > div:nth-child(3) > header > nav.nav-box > ul{
    position: absolute;
    background-color: white;
    min-width: 150px;
    box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);
    z-index: 1;
    }

    .label {
        display: block;
        cursor: pointer;
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
        float: right;
    }

    #toggle:checked + .f-cb {
        display: block !important;
    }
}

@media only screen and (max-width: 760px) {

    .label {
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
        float: right;
    }
}

I am attempting to add a close button 'X' within the dropdown menu that appears when clicking the hamburger icon. However, I am unsure of how to implement this. Any guidance would be appreciated.

html css bootstrap-4 navbar toggle

Answer 1

Answer №1

It seems like your approach initially may have been incorrect. A simple solution to replicating this functionality would involve incorporating some JavaScript.

Here is the HTML code snippet:

<div id="header" class="border">
  <nav id="nav_container">
    <button id="menu_btn" class="cursor_pointer" type="button">
      &#9776;
    </button>
    <ul id="menu_list_container" class="border">
      <li id="close_btn_container">
        <button id="close_menu_btn" class="cursor_pointer" type="button">
&#10006;
        </button>
      </li>
      <li>Point I</li>
      <li>Point II</li>
      <li>Point III</li>
    </ul>
  </nav>
</div>

Next, here is the CSS code snippet:

* {
  box-sizing: border-box
}

#header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  max-height: 60px
}

#nav_container {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  @media only screen and (max-width: 760px) {
      display: flex;
  }
}

#menu_btn {
  width: 40px;
  min-height: 40px;
}

#menu_list_container {
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  display: none;
}

#close_btn_container {
  width: 100%;
  display: flex;
  justify-content: flex-end
}

.border {
    border: 1px black solid;
}

.cursor_pointer {
    cursor: pointer
}

Finally, here is the JS code snippet:

const menuButton = document.getElementById("menu_btn")
const closeMenuButton = document.getElementById("close_menu_btn")
const menuListContainer = document.getElementById("menu_list_container")

menuButton.addEventListener("click", () => {
  menuListContainer.style.display = "flex"
})

closeMenuButton.addEventListener("click", () => {
  menuListContainer.style.display = "none"
})

For reference, you can view the CodePen link here: https://codepen.io/takhirkudusov/pen/dywZrrx

Answer 2

It seems like your approach initially may have been incorrect. A simple solution to replicating this functionality would involve incorporating some JavaScript.

Here is the HTML code snippet:

<div id="header" class="border">
  <nav id="nav_container">
    <button id="menu_btn" class="cursor_pointer" type="button">
      &#9776;
    </button>
    <ul id="menu_list_container" class="border">
      <li id="close_btn_container">
        <button id="close_menu_btn" class="cursor_pointer" type="button">
&#10006;
        </button>
      </li>
      <li>Point I</li>
      <li>Point II</li>
      <li>Point III</li>
    </ul>
  </nav>
</div>

Next, here is the CSS code snippet:

* {
  box-sizing: border-box
}

#header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  max-height: 60px
}

#nav_container {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  @media only screen and (max-width: 760px) {
      display: flex;
  }
}

#menu_btn {
  width: 40px;
  min-height: 40px;
}

#menu_list_container {
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  display: none;
}

#close_btn_container {
  width: 100%;
  display: flex;
  justify-content: flex-end
}

.border {
    border: 1px black solid;
}

.cursor_pointer {
    cursor: pointer
}

Finally, here is the JS code snippet:

const menuButton = document.getElementById("menu_btn")
const closeMenuButton = document.getElementById("close_menu_btn")
const menuListContainer = document.getElementById("menu_list_container")

menuButton.addEventListener("click", () => {
  menuListContainer.style.display = "flex"
})

closeMenuButton.addEventListener("click", () => {
  menuListContainer.style.display = "none"
})

For reference, you can view the CodePen link here: https://codepen.io/takhirkudusov/pen/dywZrrx

Click X button to toggle and close the dropdown menu

Answer №1

Similar questions

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

Tips for expanding the boundary of a Font Awesome icon

Updating the favicon by replacing the image URL

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

Troubleshooting a Border Problem in Bootstrap 5 Accordions

Adding external JSON data to a plain HTML document can be achieved through the process of

The attribute aria-required is necessary for a radio group

Steps to ensure your Bootstrap side menu spans the entire height of the page

The anchor for the circular image is oversized

Issues with functionality arise when cloning HTML divs using JQuery

Grid sidebar using tailwindcss

Adding a custom class to a select2 dropdown: How can it be done?

Using Yii2, create a button with an onclick event that executes a JsExpression

Spooky results displayed on website from NightmareJS

Using regular expressions to extract URLs from code in Python

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Displaying images in Dash Python by utilizing external Javascript

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

Header not displaying properly on website

The DXTreeview feature in AngularJS restricts the expansion of branches