Creating a dynamic navigation menu with ul and li elements that adapts to

Question

Creating a dynamic navigation menu with ul and li elements that adapts to

Lately, I've been experimenting with transforming a horizontal menubar into a drop-down hamburger menu for smaller screens by following various tutorials. However, I'm encountering difficulties in getting everything to work seamlessly. Many of the tutorials I've come across abandon the ul/li format, which I prefer to keep for semantic and accessibility reasons. This decision has made it challenging for me to ensure the dropdown menu appears correctly on the screen.

My objective is to have the hamburger menu open four menu items, centered on the screen below the top header bar. I've made progress in making the hamburger menu functional, but it's currently opening the items off-center and not below the top menubar. Are there any suggestions that could help me achieve this without having to completely overhaul the menubar code?

Snippet:

const menu = document.querySelector(".nav");
let open;

function openMenu() {
  if (open) {
    menu.style.display = "none";
    open = false;
  } else if (!open) {
    menu.style.display = "block";
    open = true;
  }
}

.menubar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  position: fixed;
  top: 0;
  -webkit-user-select: all;
  user-select: none;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 24px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  position: absolute;
}

.nav {
  display: flex;
  font-size: 18px;
  flex-direction: row;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.nav li {
  margin: 0 15px;
}

.hamburger {
  margin: 0 13px 0 auto;
  height: inherit;
}

@media screen and (min-width: 801px) {
  .nav {
    display: flex !important;
  }
  .hamburger {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .hamburger {
    display: flex;
  }
  .nav {
    display: none;
    text-align: center;
  }
}

<body>
  <div class="menubar">
    <a href="" class="logo">WEBSITE NAME</a>
    <ul class="nav">
      <li><a href="">HOME</a></li>
      <li><a href="">MENU1</a></li>
      <li><a href="">MENU2</a></li>
      <li><a href="">ABOUT</a></li>
    </ul>

    <input type="image" class="hamburger" onclick={openMenu()} src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
  </div>
</body>

Check out the accompanying JSFiddle.

javascript html css html-lists hamburger-menu

Answer 1

Answer №1

One way to handle window resizing is by adding a listener that triggers when the window size changes. If the window width goes below 800px, a specific class can be added to an element.

In this case, the script adds a class called .mobile and updates the styling for the mobile menu accordingly.

To implement this functionality in your JS code:

    window.addEventListener('resize', setMobileClass);
    window.addEventListener('load', setMobileClass);

    function setMobileClass() {
        if (window.innerWidth <= 800) {
            menu.classList.add('mobile');
        } else {
            menu.classList.remove('mobile');
        }
    };

Add these CSS rules as well:

    .mobile {
        position: absolute;
        right: 0px;
        top: 50px;
    }

Here's an example setup:

const menu = document.querySelector(".nav");
let open;

function openMenu() {
    if (open) {
        menu.style.display = "none";
        open = false;
    } else if (!open) {
        menu.style.display = "block";
        open = true;
    }
}

window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);

function setMobileClass() {
    if (window.innerWidth <= 800) {
        menu.classList.add('mobile');
    } else {
        menu.classList.remove('mobile');
    }
};

.menubar {
    /* CSS styles for menubar */
}

/* Other CSS styles for navigation, logo, and hamburger icon */

.mobile {
    position: absolute;
    right: 0px;
    top: 50px;
}

<div class="menubar">
    <a href="" class="logo">WEBSITE NAME</a>
    <ul class="nav">
        <li><a href="">HOME</a></li>
        <li><a href="">MENU1</a></li>
        <li><a href="">MENU2</a></li>
        <li><a href="">ABOUT</a></li>
    </ul>

    <input type="image" class="hamburger" onclick={openMenu()}
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>

Answer 2

One way to handle window resizing is by adding a listener that triggers when the window size changes. If the window width goes below 800px, a specific class can be added to an element.

In this case, the script adds a class called .mobile and updates the styling for the mobile menu accordingly.

To implement this functionality in your JS code:

    window.addEventListener('resize', setMobileClass);
    window.addEventListener('load', setMobileClass);

    function setMobileClass() {
        if (window.innerWidth <= 800) {
            menu.classList.add('mobile');
        } else {
            menu.classList.remove('mobile');
        }
    };

Add these CSS rules as well:

    .mobile {
        position: absolute;
        right: 0px;
        top: 50px;
    }

Here's an example setup:

const menu = document.querySelector(".nav");
let open;

function openMenu() {
    if (open) {
        menu.style.display = "none";
        open = false;
    } else if (!open) {
        menu.style.display = "block";
        open = true;
    }
}

window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);

function setMobileClass() {
    if (window.innerWidth <= 800) {
        menu.classList.add('mobile');
    } else {
        menu.classList.remove('mobile');
    }
};

.menubar {
    /* CSS styles for menubar */
}

/* Other CSS styles for navigation, logo, and hamburger icon */

.mobile {
    position: absolute;
    right: 0px;
    top: 50px;
}

<div class="menubar">
    <a href="" class="logo">WEBSITE NAME</a>
    <ul class="nav">
        <li><a href="">HOME</a></li>
        <li><a href="">MENU1</a></li>
        <li><a href="">MENU2</a></li>
        <li><a href="">ABOUT</a></li>
    </ul>

    <input type="image" class="hamburger" onclick={openMenu()}
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>

Answer 3

Answer №2

I came up with a stylish and effective solution inspired by 54ka's suggestion. Rather than implementing extra JavaScript code to add a mobile class, I decided to tweak the screen-size restricted nav class like this:

@media screen and (max-width: 800px) {
  .hamburger {
    display: flex;
  }
  .nav {
    display: none;
    position: absolute;
    text-align: center;
    width: 100%;
    right: 0px;
    top: 50px;
  }
}

By doing so, I ensured that the menu would be centered and positioned beneath the menubar. To enhance the dropdown menu further, you can include additional commands for background-color and borders.

Answer 4

I came up with a stylish and effective solution inspired by 54ka's suggestion. Rather than implementing extra JavaScript code to add a mobile class, I decided to tweak the screen-size restricted nav class like this:

@media screen and (max-width: 800px) {
  .hamburger {
    display: flex;
  }
  .nav {
    display: none;
    position: absolute;
    text-align: center;
    width: 100%;
    right: 0px;
    top: 50px;
  }
}

By doing so, I ensured that the menu would be centered and positioned beneath the menubar. To enhance the dropdown menu further, you can include additional commands for background-color and borders.

Creating a dynamic navigation menu with ul and li elements that adapts to

Answer №1

Answer №2

Similar questions

Database query results displayed in a vertical scroll block

Implementing TinyMCE Styles into Your Published Content

Dynamically change the fill color of an SVG using styled-components

What is the best way to create a line of divs within a row?

Connection to MondoDB via MongoClient in a Node.js environment has encountered an error and cannot

I want to display a div above an image when hovering over it

What steps do I need to take to ensure that this Regex pattern only recognizes percentages?

Guide to executing a server request upon clicking a tab in asp.net using bootstrap

Database Records Showing '0' Value for Nullable Form Data

Having trouble retrieving input field values with Angular.js

Exploring AngularJS: Filtering a nested JSON array

Neglecting the Outcome of Async/Await

Stopping a jQuery function from executing multiple times while it is already active - is it possible?

My textbox occasionally appears devoid of any style

BB10 - Capable of directing attention to text box, yet unable to input text

Ways to retrieve the content from an element embedded within a hyperlink using Python

Exploring the ancestry of Mongo

Stop Bootstrap from impacting a specific division on my webpage

Selecting Specific File in Directory Using HTML File Input

Tips for changing information in a child document using mongoose