如何创建固定，垂直，可扩展的导航栏？

Question

我已经阅读了相关问题，遗憾的是这些问题没有回答我的具体问题：

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

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