0

私がやろうとしていることを処理するためのより良い方法があるかどうか疑問に思っていました. メニューバーがliであり、オーバーフロープロパティが非表示に設定された高さが設定されたクラス要素である基本的なドロップダウンナビゲーションメニューを作成しました。次に、ホバーするとアニメーションの「ドロップダウン」部分が表示されるように高さでアニメーション化しますマウスでオーバー。しかし、他の Web ページ要素 (メイン コンテンツなど) は、メニュー要素が衝突したときに押し出されて再配置されることがわかりました。影響を受ける要素を絶対配置にすることで一時的に修正しましたが、これを修正するためのより良い、より効果的な方法があると感じずにはいられません。

より良い言葉がないためのナビゲーション要素がポジショニングに関して「無視」されるようにする方法はありますか?

これが実際の動作です - 最初の「記事」エリアは絶対位置に配置されています - http://gamearticlesite.bbdesigns.ca/index.html

コード：

Jクエリ

 //When mouse rolls over  
    $("li.extend").mouseover(function(){  
        $(this).stop().animate({height:'250px'},{queue:false, duration:500})  
    });  

    //When mouse is removed  
    $("li.extend").mouseout(function(){  
        $(this).stop().animate({height:'35px'},{queue:false, duration:500})  
    });

CSS:

#headerNav ul{
    list-style-type: none;
    color:#efefef;  
    margin:0;
    margin-left:75px;
    padding:0;  
}

#headerNav ul li{
    width:125px;  
    height:35px;  
    float:left;  
    color:#efefef;  
    text-align:center;      
    margin-left:10px;
    margin-right:10px;
    overflow:hidden;
}
4

2 に答える 2

1

正解は、はい、これを解決する方法は Absolute Positioning ですが、ナビゲーション メニューで使用することです。投稿された例では、ul要素で、ul要素内のli要素の配置に問題が発生する可能性があるため、アニメーション化される個々のli要素ではありません。

ul の位置を position:absolute に設定し、z-index プロパティを指定して、衝突する要素の「上」にあることを確認すると、すべてがうまく機能しました。

于 2012-12-16T08:27:22.567 に答える
0

使用する

float:left

また

position:absolute
于 2012-12-16T06:09:44.193 に答える