1

メニューにカーソルを合わせると、次のコードを使用してメニューを表示し、サブメニューを表示します。jQueryでslideUpやslideDownのようにサブメニューを表示する際にアニメーションを追加したい。しかし、これには純粋な CSS を使用したいと考えています。それを実現するには、コードにどのような変更を加える必要がありますか?

<div id="main_nav">
    <ul>
        <li >
            <a href="#" >Item 0</a>
        </li>
        <li>
            <a href="#">
                Item 1
            </a>
            <ul class="sub-menu">
                <li><a href="#">Item 1 0</a></li>
                <li><a href="#">Item 1 1</a></li>
                <li><a href="#">Item 1 2</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Item 1 2 0</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">
                <span>Item 3</span>
            </a>
            <ul class="sub-menu">
                <li><a href="#">Item 3 0</a></li>
            </ul>
        </li>
    </ul>
</div>




#main_nav ul,#main_nav ul ul{
    margin:0;
    list-style:none;
    padding:0;
}
#main_nav ul ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    background-color:#1b1b1b;
    padding:0 10px 10px;
}
#main_nav ul li:hover>*{
    display:block;
}
#main_nav ul li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
#main_nav ul li:hover{
    z-index:1;

}
#main_nav ul ul ul{
    position:absolute;
    left:100%;
    top:0;
}
#main_nav ul{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    padding:0;
    display:inline;
}
* html #main_nav ul li a{
    display:inline-block;
}
#main_nav ul>li{
    margin:0;
}
#main_nav ul a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font-size:12px;
    color:#000;
    cursor:pointer;
    padding:10px;
    background-color:#FFFFFF;
}
#main_nav ul ul li{
    float:none;
    margin:10px 0 0;
}
#main_nav ul ul a{
    text-align:left;
    padding:4px;
    background-color:#1b1b1b;
    font-size: 12px ;
    color:#FFF;
}
#main_nav ul li:hover>a{
    background-color:#000000;
    color:#2b97dd;
    opacity:90%;
}
#main_nav ul ul li:hover>a{
    background-color:#000000;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    opacity:90%;

}

フィドル: http://jsfiddle.net/Midhun28/ZstjT/

4

2 に答える 2

2

プレーンな CSS で偽装する方法の 1 つは、topプロパティをアニメーション化することです。

li{
  z-index: 10;   /* <- must appear above the animation */
}

ul ul{
  visibility: hidden;
  top: -100%;
  z-index: -5; 
  opacity: 0;
  transition: visibility 0s linear 0.4s, opacity .3s linear, top .3s ease-out;         
}

li:hover > ul{
  visibility: visible;
  opacity: 1;    
  top: 58px;
  transition-delay: 0s;
}

そしてoverflow、メニューコンテナを非表示にするか、メニューの上にある要素を配置z-indexして色で塗りつぶします。

これが例です。CSS の一部をクリーンアップしましたが、その多くは必要ありませんでした

于 2013-10-16T12:54:52.920 に答える
0

私は最近、jQuery SlideUp が属性スタイルで何をしているかを見たいと思ったので、スクリーンショットを撮ろうとしました (コードを見るよりも見やすいです:P)

ここにあります ：） 要素スタイル属性の変更のコンソール ビュー

したがって、このアニメーションを CSS3 で複製することは可能です。マージン、パディング、高さをアニメーション化するだけで、jQuery と同じ効果が得られます。

于 2015-03-16T09:37:50.837 に答える