0

どこから始めればよいのかよくわかりませんが、jqueryでメニューを作成しています。今すぐカーソルを合わせると、テキストに対してフェードイン/フェードアウト効果が発生し、リンクが手動で処理されます。

単純な行を追加したかったのですが、おそらくcssで実行されますか？ホバーしているときに各liの下にアイテムを移動し、ホバーしているliにスライドして、表示されるだけではありません。

私は（できれば）画像なしでこれまで実際にそれを行ったことがないので、そのようなものからどこから始めればよいのかわかりません。マウスでdivを離れるときは、どこかで開始してulだけを移動し、どこにいても停止する必要があります。リンクをクリックしても、そのままにしておきます。私は誰かに私のためにこれを作るように頼んでいません（あなたがそれを好むのでない限り）、ただ正しい方向に向けられるために。これを行うメニューを備えた無料のコードをいくつか見て、それらを使用したり、モデル化したりしようとしましたが、私のメニューでは機能しません。

フィドル

4

1 に答える 1

1

私は少し前にこれをしました、多分それはあなたが必要とするものです。ホバーしているアンカー要素の幅を計算し、アンダーライナー要素（div）をその幅と位置の両方に拡大します

//underliner
$('#menu a').hover(function(){
    var position = $(this).position(); var width = $(this).width();
    $('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
    $('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
    $('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});

下線要素のCSS（適切と思われる高さとbgの色を変更します）

#underliner {
    display: none;
    position: relative;
    height: 5px;
    line-height: 5px;
    font-size: 1px;
    background-color: #44c8f5;
    width: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
}

HTML

<div id="menu">
    <ul>
        list items with <a href>'s
    </ul>
    <div id="underliner"></div>
</div>

編集：私はそれをあなたのコードとマージしようとしました、しかしあなたがhtmlを含まなかったので、私はあなたの「ナビバー」がどのようにレイアウトされたかを推測しなければなりませんでした。とにかく、このフィドルを試してください：http: //jsfiddle.net/c_kick/DuWcz/

于 2012-07-16T06:07:24.503 に答える