如何在可擴展菜單中正確顯示標題？

Question

我試圖做一個擴展菜單中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; 
} 

如果您需要更多信息，請告訴我，我將編輯帖子。

Answer 1

使用過渡延遲可能？

Fiddle（移動revelant CSS類底部）

#nav li span { 
    display: inline-block; 
    font-size: 14px; 
    font-size: 1.4rem; 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    padding-left: 10px; 
    width: 0; 
    transition:opacity 0.5s ease; // ease opacity 
} 

.expanded #nav li span { 
    display: inline-block; 
    height: auto; 
    opacity: 1; 
    overflow: visible; 
    width: auto; 
    transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time 
} 

Answer 2

的問題是，你膨脹的容器太小，無法放置頭條正確，使它有點大，它會工作

.expanded #sidebar { 
    width: 180px; 
}