0

最初に言いたいのは、私はポーランド人で、英語は得意ではありません。自分のサイトを作っているのですが、メニューに問題があります。自動高さとjqueryスライドを使用して素敵なアニメーションを作成するため、非常に具体的です。

私の問題は、メニューの「第 2」レベルにあります。アイテムの説明の下線を表示する必要がありますが、ページの左側にあります。

HTMLは問題ありません

<nav>
    <ul>
        <li>1. Item
            <h3>1. item description</h3>
        </li>

        <li>2. Item
            <h3>2. item description</h3>
        </li>

        <li>3. Item
            <h3>3. item description</h3>
        </li>
    </ul>
</nav>

問題は CSS と一部の DOM 設定にあると思います。ここにある必要があります：

nav {
    background-color:#eee;
    width:100%;
    height:auto;
    position:fixed;
    top:0px;
}
nav ul {
    /*don't enter hegiht*/
}
nav ul li {
    list-style:none;
}
nav ul li {
    display:table-cell;
    padding:20px 10px 21px 10px;
}
nav ul li h3 {
    display:block;
}

および jQuery :

$(document).ready(function() {

    $("nav h3").hide();
    //hide description

    //show when hover
    $("nav li").hover(function(){
        $("h3", this).slideToggle("slow");

    },function(){
        $("h3", this).slideToggle("slow");
    },800);
    return false;


});
4

2 に答える 2

1

「アイテムの説明の下線を表示する必要がありますが、ページの左側に表示する必要があります」の意味がよくわかりません。

これにより、説明がページの左側に配置されます。

 nav ul li h3 {
        position:absolute;
        left:0px;            
        display:block;
    }​
于 2012-12-23T19:05:59.873 に答える
0

DOM 要素がネストされている場合、それらの最も自然なレイアウトは、それらをそのように表示することでもあります。絶対配置を使用することでこれを回避できますが、私はその方法で物事を見失うことがよくあります。

あなたが持っているリストを2つの別々のリストに分割します：

<nav>
    <ul class='top'>
        <li>1. Item</li>
        <li>2. Item</li>
        <li>3. Item</li>
    </ul>
    <ul class='bottom'>
        <li>1. item description</li>
        <li>2. item description</li>
        <li>3. item description</li>
    </ul>
</nav>

これにより、アニメーションはli、ユーザーが top にカーソルを合わせたときに、対応する下を見つける問題になりliます。

$(document).ready(function() {

    $("nav ul.bottom li").hide();
    //hide description

    //show when hover
    $("nav ul.top li").hover(function(){
        $("nav ul.bottom li:eq("+$(this).index()+")").slideToggle("slow");

    },function(){
        $("nav ul.bottom li:eq("+$(this).index()+")").slideToggle("slow");
    },800);
    return false;

});

この追加の CSS を使用しました。

nav ul.bottom li {
    position:absolute;
    left:0px;            
    display:block;
}

更新された Fiddle は次の場所にあります: http://jsfiddle.net/GRf98/2/

于 2012-12-23T20:53:23.950 に答える