Expanding and Collapsing Sidebars?-CodePudding

<body>
    <div class = 'menu'>
        <button class = 'menuButton'></button>
        <div class = 'linkList'>
            <ul>
                <li><a class = 'links' href = '#'>Link 1</a></li>
                <li><a class = 'links' href = '#'>Link 2</a></li>
                <li><a class = 'links' href = '#'>Link 3</a></li>
                <li><a class = 'links' href = '#'>Link 4</a></li>
                <li><a class = 'links' href = '#'>Link 5</a></li>
                <li><a class = 'links' href = '#'>Link 6</a></li>
                <li><a class = 'links' href = '#'>Link 7</a></li>
            </ul>
        </div>
        <style>
            .menuButton {
                position: absolute;
                width: 30px;
                height: 30px;
                top: 25px;
                left: 1303px;
                border: none;
                outline: none;
                transition: ease-out 0.5s;
                background-image: url('/Images/Menu_Icon.png');
                background-color: #e0e0e0;
                cursor: pointer;
            }

            .links {
                font-family: 'comfortaa';
                font-size: 18px;
                font-weight: 500;
                color: #000000;
                text-decoration: none;
                transition: ease-out 0.4s;
            }

            .links:hover {
                color: #5e00bc;
            }

            .linkList {
                position: fixed;
                width: 150px;
                height: 100%;
                right: -150px;
                top: 85px;
                transition: ease-out 0.5s;
                background: #e0e0e0;
            }

            .linkList ul li {
                list-style: none;
                padding: 15px;
            }

            .menuButton:focus ~ .linkList {
                right: 0px;
            }

            .linkList:hover {
                right: 0px;
            }
            
        </style>
    </div>
</body>

I'm working on a sidebar and can get it to expand with a button press, but don't know how to make it collapse with the same button. In addition to this, the action repeats itself when you go to another tab and return to the website. If someone could help with this issue, I would greatly appreciate it. 1st Part of CSS | 2nd Part of CSS

CodePudding user response：

You can do following:

menuBtn = document.getElementsByClassName("menuButton")[0];
menuBtn.addEventListener("click", function() {
  menu = document.getElementsByClassName("linkList")[0];
  menu.style.webkitTransition = "0.5s";
  if (menu.style.right == "0px") {
    menu.style.right = "-100%";
  } else {
    menu.style.right = "0px";
  }
});

.menuButton {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 25px;
  left: 1303px;
  border: none;
  outline: none;
  background-image: url("/Images/Menu_Icon.png");
  background-color: #e0e0e0;
  cursor: pointer;
}

.links {
  font-family: "comfortaa";
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}

.links:hover {
  color: #5e00bc;
}

.linkList {
  position: fixed;
  width: 150px;
  height: 100%;
  right: -150px;
  top: 85px;
  background: #e0e0e0;
}

.linkList ul li {
  list-style: none;
  padding: 15px;
}

.linkList:hover {
  right: 0px;
}

<div >
  <button ></button>
  <div >
    <ul>
      <li><a  href="#">Link 1</a></li>
      <li><a  href="#">Link 2</a></li>
      <li><a  href="#">Link 3</a></li>
      <li><a  href="#">Link 4</a></li>
      <li><a  href="#">Link 5</a></li>
      <li><a  href="#">Link 6</a></li>
      <li><a  href="#">Link 7</a></li>
    </ul>
  </div>
</div>

I have added JS code to handle Click event.

CodePudding user response：

I would recommend using jQuery's animate function with jQuery UI's easing options instead of CSS transitions. It is more configurable and is less likely to break when you add new stuff to your page. Try this code, using Javascript and Event Listeners:

<body>
    <!-- add the jQuery library -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- add the jQuery UI library -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
    <div class = 'menu'>
        <button class = 'menuButton'></button>
        <div class = 'linkList'>
            <ul>
                <li><a class = 'links' href = '#'>Link 1</a></li>
                <li><a class = 'links' href = '#'>Link 2</a></li>
                <li><a class = 'links' href = '#'>Link 3</a></li>
                <li><a class = 'links' href = '#'>Link 4</a></li>
                <li><a class = 'links' href = '#'>Link 5</a></li>
                <li><a class = 'links' href = '#'>Link 6</a></li>
                <li><a class = 'links' href = '#'>Link 7</a></li>
            </ul>
        </div>
        <style>
            .menuButton {
                position: absolute;
                width: 30px;
                height: 30px;
                top: 25px;
                left: 1303px;
                border: none;
                outline: none;
                background-image: url('/Images/Menu_Icon.png');
                background-color: #e0e0e0;
                cursor: pointer;
            }

            .links {
                font-family: 'comfortaa';
                font-size: 18px;
                font-weight: 500;
                color: #000000;
                text-decoration: none;
            }

            .links:hover {
                color: #5e00bc;
            }

            .linkList {
                position: fixed;
                width: 150px;
                height: 100%;
                right: -150px;
                top: 85px;
                background: #e0e0e0;
            }

            .linkList ul li {
                list-style: none;
                padding: 15px;
            }
            
        </style>
        <script>
            // this block of code will run every time the user clicks on the element with the menuButton class
            document.getElementsByClassName('menuButton')[0].addEventListener('click', function() {
                // if the menu is visible
                if ($('.linkList').hasClass('visible')) {
                    // slide to the left out of sight, and remove the 'visible' class
                    $('.linkList').animate({"right": "-150px"}, 500, "easeOutQuart").removeClass('visible');

                // if the menu is not visible
                } else if (!$('.linkList').hasClass('visible')) {
                    // slide to the right into sight, and add the 'visible' class
                    $('.linkList').animate({"right": "0px"}, 500, "easeOutQuart").addClass('visible');
                }
            })
        </script>
    </div>
</body>