0

次のjQueryアニメーションメニューを編集して、サブテキストdivの幅が親メニューリストアイテムの幅ではなく絶対600pxになるようにしようとしています。

コードはこちらをクリックしてください

サブテキストクラスに絶対位置を追加しようとしましたが、機能しませんでした。

これは、たとえば[バージョン情報]メニュー項目にカーソルを合わせたときに取得しようとしているものです。

ここに画像の説明を入力してください

あなたの助けは大歓迎です。

4

2 に答える 2

4

以下は、最も重要なスタイルの一部です。

ul {
    list-style: none;     /* Get rid of bullets on li tags */
    position: relative;   /* Use relative position here, but not on li tags */
}
li {
    /* position: relative; */   /* Remove this style, to make all dropdown
                                   divs appear at the same location */
}
a {
    outline: none;   /* Get rid of outline on links */
}
.subtext {
    overflow: hidden;
    height: 0;
    position: absolute;
    z-index: 1;
}
li:hover .subtext {
    z-index: 2;   /* Make sure the active menu dropdown is on top */
}
/* Apply background color to both the li tags and the dropdown divs */
.green,  .green  .subtext { background-color: #6AA63B; }
.yellow, .yellow .subtext { background-color: #FBC700; }
.red,    .red    .subtext { background-color: #D52100; }
.purple, .purple .subtext { background-color: #5122B4; }
.blue,   .blue   .subtext { background-color: #0292C0; }

CSSトランジションを備えたバージョンでは、次のスタイルが追加されています。

.subtext {
    -webkit-transition: height 0.6s;
       -moz-transition: height 0.6s;
            transition: height 0.6s;
}
li:hover .subtext {
    height: 200px;
}

どちらのデモも同じHTMLとほとんど同じCSSを使用しています。どちらのバージョンも、既存のHTMLを編集する必要はありませんでした。CSSトランジションのあるバージョンはjQueryを必要としません。

于 2013-03-24T19:00:03.863 に答える
0

これを実現する方法は次のとおりです。

position: relative;liから削除し、 .subtextに追加しdisplay: none;ますheight:0;

次に、javascriptコードを次のように変更します。

//When mouse rolls over
$("li").mouseenter(function(){
    $('.subtext').hide(); // remove this for a fancier effect
    $(this).find('.subtext').css({backgroundColor: $(this).css('backgroundColor')})
    $(this).find('.subtext').stop().animate({height:'250px'},{queue:false, duration:600, easing: ''}).show()
});

//When mouse is removed
$("li").mouseleave(function(){
    $(this).find('.subtext').stop().animate({height:'0px'},{queue:false, duration:600, easing: ''}, function() {$(this).find('.subtext').hide()})
});

JsFiddleデモ

于 2013-03-24T18:58:38.343 に答える