0

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

さらに情報が必要な場合はお知らせください。投稿を編集します。

4

2 に答える 2

1

おそらくtransition-delayを使用しますか？

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
}
于 2013-10-18T11:30:46.240 に答える