-1

JSFiddle # http://jsfiddle.net/UqyAq/

html -

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2
            <ul>
                <li>Sub-Button 1</li>
                <li>Sub-Button 2</li>
                <li>Sub-Button 3</li>
            </ul>
        </li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
    </ul>
</nav>

css -

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 100%; width: 18%;
    position: absolute;
}
nav ul {
    list-style-type: none;
    font-family: 'Universal Accreditation', Serif;
    font-size: 18pt;
    letter-spacing: 1px;
    font-variant: small-caps;
    color: black;
}

nav ul ul {
    display: none;
}

nav ul li {
    display: block;
}

nav ul li:hover ul {
    display: block;
}

基本的に、単純な順序付けられていないリストのドロップダウン メニューを見ています。2 番目の層のドロップダウンにイージング効果を作成するために何を使用する必要があるかを把握しようとしています。「ボタン 2」にカーソルを合わせると、サブメニューが表示されます。

ワンジャンプの動きに注意してください。どうすれば遅くなりますか？サブメニューが「ボタン 2」の下からスライドしているように見えますか?

JavaScript または CSS を使用する必要がありますか?

4

1 に答える 1

0

このコードを使用してください..

HTML:

<ul id="menu">
<li><a href="#">Link 1</a>
   <ul class="submenu">
     <li><a href="#">Sub Link 1.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 1.1.1</a></li>
          <li><a href="#"> Sub Link 1.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 1.2</a></li>
     <li><a href="#">Sub Link 1.3</a></li>
   </ul>
 </li>
 <li><a href="#">Link 2</a>
    <ul class="submenu">
     <li><a href="#">Sub Link 2.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 2.1.1</a></li>
          <li><a href="#"> Sub Link 2.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 2.2</a></li>
   </ul>
 </li>
 </ul>

CSS: .submenu { 表示: なし; } #menu li ul{ margin-left:15px; }

Jクエリ:

$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
                      function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
    $('ul:first', this).each(function () {
        var p = $(this).parent();
        $(this).css('top', p.position().top)
               .css('left', p.position().left + p.width())
               .show();
    });},
    function () { $('ul:first', this).hide(); }
);
});
于 2013-02-25T06:37:51.830 に答える