javascript - 如何创建一个固定的、垂直的、可扩展的导航栏？

Question

我已经阅读了相关问题，很遗憾，这些问题没有给出我的具体问题的答案:

在Bootstrap 3.0.3的基础上，我试图在左侧创建一个宽度为50px的固定导航栏，当您点击navbar-toogle时，它应该扩展到150px的宽度。当导航栏未展开时，它应该只显示每个链接的字形。我能够创建具有固定宽度的导航栏，但我坚持正确合并导航栏切换和跨度文本，这既不显示也不正常工作。查看预期结果的示例图片:

HTML:

<!-- Sidebar -->
<div id="sidebar" role="navigation">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>


    <div id="sidebar-nav">
                <ul class="nav nav-stacked">

                    <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-star"></span>Link1</a></li>
                    <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-cloud"></span>Link2</a></li>
                    <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-fire"></span>Link3</a></li>
                    <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-heart"></span>Link4</a></li>
                    <li><a href="http://stackoverflow.com/"> <span class="glyphicon glyphicon-send"></span>Link5</a></li>

                </ul>
    </div>
<!-- Sidebar End -->
</div>

CSS:

    #sidebar {
    background-color: #16a085;
    color: white;
    height: 100%;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    z-index: 2;

}

#sidebar-nav {
    margin-top: 75px;
}

非常感谢您的建议。

Answer 1

类似于 this你在追求什么？动画可以通过宽度上的 -webkit-transition 来完成。我会在半小时后进行微调。

#sidebar .link-text {
    visibility: hidden;
}
#sidebar:hover .link-text {
    visibility: visible;
}