Section scroll

by akmiecik

HTML

<section id="hedge" class="section menu-section">
        <div class="the_menu menu">
            <nav class="hamburger-menu">
                <ul class="menu_list r-list">
                    <li class="menu_item"><a href="#hedge">Asphalt Financial Hedge</a></li>
                    <li class="menu_item"><a href="#models">Business Models</a></li>
                    <li class="menu_item"><a href="#services">Services</a></li>
                    <li class="menu_item"><a href="#the_app">The Asphalt App</a></li>
                </ul>
            </nav>
            <button class="menu_toggle r-button" type="button"
                onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))"
                aria-label="Main Menu">
                <svg class="button_svg" width="7vw" height="12vh" viewBox="0 0 100 100">
                    <path class="line line1"
                        d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058">
                    </path>
                    <path class="line line2" d="M 20,50 H 80"></path>
                    <path class="line line3"
                        d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942">
                    </path>
                </svg>
            </button>
        </div>
        <div id="hedge_background">
            <h1 class="section_title">Asphalt Financial Hedge</h1>
        </div>
        <div class="hedge copy">

        </div>

    </section>
<section id="models" class="section menu-section">
        <div class="the_menu menu">
            <nav class="hamburger-menu">
             ...

CSS

/* General section styles */
section {
  width: 90vw;
  height: 100vh;
  border-bottom: 5px solid black;
  display: block;
  position: relative;
}

#hedge_background {
  background-color: red;
}

#models_background {
  background-color: green;
}

#services_background{
  background-color: yellow;
}

#the_app_background {
  background-color: yellow;
}

/* Menu CSS */
.menu_toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000; /* Ensure it is above other content */
}
.hamburger-menu {
  position: absolute;
  top: 10vh;
  right: -40vw; /* Initially hidden */
  background-color: black;
  padding: 10px;
  z-index: 1000;
  width: 30vw;
  height: 82vh;
  opacity: 0;
  transition: right 1.5s ease, opacity 1.5s ease; /* Add transition */
}

.hamburger-menu.active {
  right: 2vw; /* Visible position */
  opacity: 1;
}

.hamburger-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu_list.r-list {
  text-align: right;
  position: relative;
  right: 1vw;
}

.hamburger-menu li {
  margin-bottom: 10px;
  padding: 0.5rem 2rem;
  font-size: 2vw;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 2px;
  margin-left: 5vw;
}

.hamburger-menu li a {
  color: #fff !important;
  font-size: 2vw;
  font-family: 'AsphaltBold';
  width: 30vw;
  display: block;
}

.hamburger-menu li.active {
  font-weight: bold;
}

.menu_activated .background,
.menu_activated .copy {
  transform: translateX(-10vw);
}

button.menu_toggle.r-button {
  background: #000000;
  border-radius: 0 0 35px 35px !important;
  transform: scale(0.7);
  opacity: 1;
  transition: opacity 1s ease;
  position: absolute;
  right: 7vw;
  top: 0vh;
}

.r-button {
  background-color: transparent;
  padding: 0;
  border-width: 0;
  border-style: unset;
  cursor: pointer;
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner...

JavaScript

// Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Select all the menu toggle buttons
    const menuToggles = document.querySelectorAll('.menu_toggle');

    // Add an event listener to each button
    menuToggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            // Toggle the 'opened' class on the button
            this.classList.toggle('opened');

            // Find the parent section of the button
            const parentSection = this.closest('.section');

            // Toggle the 'menu_activated' class on the parent section
            parentSection.classList.toggle('menu_activated');

            // Get the hamburger menu within the same parent section
            const menu = parentSection.querySelector('.hamburger-menu');

            // Toggle the 'active' class on the hamburger menu
            menu.classList.toggle('active');
        });
    });
});