1

I am trying to emulate a vertical nav-bar as shown on Medium i.e. Menu is hidden left on some 'click' and when visible shifts page to the right.
I can create Vertical Menu but I'm clueless about this effect.
I am using Bootstrap, Jquery and Angular.
Thanks

Richa
  • 75
  • 1
  • 5

2 Answers2

1

This is known as the "off canvas" effect.

You can study this template: Bootply Off Canvas side. You may also want to look into this question/answer: css - Bootstrap 3 slide in Menu

Community
  • 1
  • 1
TimothySwieter
  • 397
  • 1
  • 2
  • 7
0

Couldn't you put it into divs and make them hidden or visible with JavaScript? Try this.

<html>
<div id="Page1">
//content here
</div>

<div id="Page2">
//content here
</div>
</html>

.

<script type="text/javascript"> 
var div = document.getElementById('Page1');
// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
</script>
div.style.display = 'block';
</script>

<script type="text/javascript"> 
var div = document.getElementById('Page2');
// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
</script>
div.style.display = 'block';
</script>
Pieter de Vries
  • 101
  • 2
  • 13