如何在 Youtube 或 Medium.com 上以 HTML 格式创建垂直导航栏答案

【问题标题】：How to create a Vertical Nav Bar in HTML as on Youtube or Medium.com如何在 Youtube 或 Medium.com 上以 HTML 格式创建垂直导航栏
【发布时间】：2014-03-09 05:19:06
【问题描述】：

我正在尝试模拟Medium 上显示的垂直导航栏，即菜单在某些“点击”时隐藏在左侧，并且当可见时将页面转移到right。
我可以创建垂直菜单，但我对这种效果一无所知。
我正在使用 Bootstrap、Jquery 和 Angular。
谢谢

【问题讨论】：

标签： jquery html css twitter-bootstrap navigationbar

【解决方案1】：

这被称为“画布外”效果。

你可以学习这个模板：Bootply Off Canvas side. 您可能还想查看这个问题/答案：css - Bootstrap 3 slide in Menu

【讨论】：

【解决方案2】：

难道你不能把它放到 div 中并用 JavaScript 让它们隐藏或可见吗？试试这个。

<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>

【讨论】：