如何在可展开菜单中正确显示标题

我正在尝试在jQuery和CSS3中做一个可扩展的菜单，这是小提琴：

http://jsfiddle.net/mNcuQ/3/

单击滑块时，将显示标题部分。但恐怕看起来不合适。我试图做的是当.expanded类处于活动状态并且滑动条的宽度被修改（过渡完成）时，然后显示具有淡入淡出效果的菜单标题。就像我现在所做的那样，菜单的标题并没有引起display: inline-block。我肯定错过了一些东西...

您有任何想法或技巧吗？在这种情况下，什么更好用：CSS3 过渡或 jQuery 动画？

这是小提琴的代码：

.HTML

<div id="sidebar"> 
    <a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>
    <nav id="nav" class="navigation" role="navigation">
        <ul class="unstyled">
            <li class="active" data-section="1"><i class="icon-home"></i>  <span>Home</span>
            </li>
            <li data-section="2" class=""><i class="icon-rocket"></i>  <span>Services</span>
            </li>
            <li data-section="3" class=""><i class="icon-laptop"></i>  <span>Projects</span>
            </li>
            <li data-section="6" class=""><i class="icon-money"></i>  <span>Price</span>
            </li>
            <li data-section="4" class=""><i class="icon-pencil"></i>  <span>Team</span>
            </li>
            <li data-section="5" class="last"><i class="icon-envelope"></i>  <span>Contact</span>
            </li>
        </ul>
    </nav>
</div>

.JS

$(document).ready(function ($) {
    $('#sidebar').click(function () {
        $('html').toggleClass('expanded');
    });
});

.CSS

#sidebar {
    background-color: #151515;
    height: 120%;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    z-index: 2;
    cursor:pointer;
    overflow-y: hidden;
}
#nav {
    margin-top: 80px;
}
#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav ul li i {
    font-size : 15px;
}
#nav ul li {
    color: #F1F1F1;
    cursor: pointer;
    display: inline-block;
    line-height: 22px;
    filter: alpha(opacity=40);
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 100;
    opacity: .4;
    padding: 8px 0 8px 15px;
    text-transform: uppercase;
    width: 70%;
}
#sidebar {
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -ms-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}
#nav ul li.active {
    filter: alpha(opacity=100);
    opacity: 1;
}
#nav ul li.last {
    padding-right: 0px;
}
#nav li span {
    display: inline-block;
    font-size: 14px;
    font-size: 1.4rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 10px;
    width: 0;
}
.btn-navbar {
    cursor: pointer;
    filter: alpha(opacity=40);
    float: left;
    margin: 20px 5px 10px;
    opacity: .4;
    padding: 7px 10px;
}
.btn-navbar .icon-bar {
    background-color: #F5F5F5;
    border-radius: 1px 1px 1px 1px;
    box-shadow: none;
    display: block;
    height: 2px;
    width: 18px;
}
/* Expanded Nav Styling */
 .expanded #container {
    left: 100px;
    transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
    width: 150px;
}
.expanded #nav li {
    width: 90%;
}
.expanded #nav li span {
    display: inline-block;
    height: auto;
    opacity: 1;
    overflow: visible;
    width: auto;
}

如果您需要更多信息，请告诉我，我会编辑帖子。