How to create a Vertical Nav Bar in HTML as on Youtube or Medium.com

StackOverflow https://stackoverflow.com/questions/22278716

Question

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

Was it helpful?

Solution

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

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top