CODEWITHSUNDEEP
javascripthtmlcss
Web Pro Source
Web Pro Source

Reputation: 181

making javascript push menu scrollable (no scrollbar)

I've got a push menu (left to right) that slides out from the left of the page sliding the page to the right. I'm trying to add a safeguard to it to where if the links exceed the page height, the menu is scrollable. Right now, it doesn't work and links get hidden. Can someone help me figure out how to make the menu scrollable.

I've tried adding scroll-y: scroll to a couple of the css elements but that didn't seem to make any difference. I'd like for the scroll feature to work on phones as well with scrolling via touch.

And also, I'd like to see how to disable scroll on the "body" when the menu is open. 

$(document).ready(function() {
	$menuLeft = $('.pushmenu-left');
	$nav_list = $('#nav_list');
	$nav_list.click(function() {
		$(this).toggleClass('active');
		$('.pushmenu-push').toggleClass('pushmenu-push-toright');
		$menuLeft.toggleClass('pushmenu-open');
	});
});
.pushmenu {
  background: #444;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;

}

.pushmenu h3 {
  color: #f1f1f1;
  font-size: 1.3em;
  font-weight: 400;
  padding: 15px 25px;
  margin: 0;
  background: #333;
  height: 16px;
}

.links {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 25%;
  width: 50%;

}

.links li { margin-top: 30px; }

.links li a {
  position: relative;
  display: block;
  color: #f1f1f1;
  font-size: 1.3em;
  font-weight: 400;
  text-decoration: none;
  padding: 14px;
}

.links li a:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: -5px;
  width: 0;
  height: 4px;
  background-color: #f1f1f1;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.links li a:hover:after { width: 70%; }

.links li a:active { color: #dbdbdb; }

.pushmenu-left { left: -300px; }

.pushmenu-left.pushmenu-open { left: 0; }

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.pushmenu-push-toright { left: 300px; }



.pushmenu, .pushmenu-push {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
  <ul class="links">
    <li><a href="index">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Missions</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Give</a></li>
	  
	  
	<li><a href="index">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Missions</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Give</a></li>

	</ul>
</nav>
</body>

Upvotes: 0

Views: 86

Answers (3)

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>demo</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .pushmenu {
      background: #444;
      text-align: center;
      font-family: Tahoma, Geneva, sans-serif;
      width: 300px;
      height: 100%;
      top: 0;
      z-index: 1000;
      position: fixed;
      overflow: hidden;
    }
    
    .main {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    
    .pushmenu h3 {
      color: #f1f1f1;
      font-size: 1.3em;
      font-weight: 400;
      padding: 15px 25px;
      margin: 0;
      background: #333;
      height: 16px;
    }
    
    .links {
      list-style-type: none;
      padding: 0;
      margin: 0 0 0 25%;
      width: 50%;
    }
    
    .links li {
      margin-top: 30px;
    }
    
    .links li a {
      position: relative;
      display: block;
      color: #f1f1f1;
      font-size: 1.3em;
      font-weight: 400;
      text-decoration: none;
      padding: 14px;
    }
    
    .links li a:after {
      content: '';
      display: block;
      position: absolute;
      left: 20px;
      bottom: -5px;
      width: 0;
      height: 4px;
      background-color: #f1f1f1;
      -webkit-transition: width 0.3s ease;
      -moz-transition: width 0.3s ease;
      transition: width 0.3s ease;
    }
    
    .links li a:hover:after {
      width: 70%;
    }
    
    .links li a:active {
      color: #dbdbdb;
    }
    
    .pushmenu-left {
      left: -150px;
    }
    
    .pushmenu-left.pushmenu-open {
      left: 0;
    }
    
    .pushmenu-push {
      overflow-x: hidden;
      position: relative;
      left: 0;
    }
    
    .pushmenu-push-toright {
      left: 300px;
    }
    
    .pushmenu,
    .pushmenu-push {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
  </style>
</head>

<body class="pushmenu-push">
  <nav class="pushmenu pushmenu-left main">
    <ul class="links">
      <li><a href="index">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Missions</a></li>
      <li><a href="#">Partners</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Give</a></li>
      <li><a href="index">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Missions</a></li>
      <li><a href="#">Partners</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Give</a></li>
    </ul>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $menuLeft = $('.pushmenu-left');
      $nav_list = $('#nav_list');
      $nav_list.click(function() {
        $(this).toggleClass('active');
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
      });
    });
  </script>
</body>

</html>

Upvotes: 0

Web Pro Source
Web Pro Source

Reputation: 181

I ended up finding a way to do what I wanted with no scrollbar by adding an inner container and using overflow's on both.

.pushmenu {
  background: #444;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;
    overflow: hidden;
}

.pushmenu_inner{
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 15px;
}

Upvotes: 1

Amal K
Amal K

Reputation: 4874

There's a CSS property called overflow which controls the contents when it exceeds the available space. Setting it to auto automatically adds a scrollbar.

pushmenu {
  background: #444;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  width: 300px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position: fixed;
  overflow: auto;

}

Upvotes: 1

Related Questions