4

コードに問題があります。幅は機能しているようですが、フロートはありません。ここにあります：

例を次に示します。

http://jsfiddle.net/v82ck/

問題: ホバリング時のメニューのフロート プロパティは変更されません。そのメニュー要素をホバリングしたときに、各メニュー要素の下の行を要素の下にスライドさせたいのです。

コードは複雑ではありません。何が起こっているのかわかりません

ジャバスクリプト：

    $(document).ready(function () { 
    $('#line-menu').css({ //initial state
        'float': 'left',
         'width' : $('#menu-1').width(),
    });
    $('#menu-1').hover(function(){ //first menu element
        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'left',
            'width' : width
        },  "slow");
    });
    $('#menu-2').hover(function(){ //second menu element

        var width = $(this).width();

        $('#line-menu').animate({ 
            'float': 'none', 
            'width' : width
        },  "slow");
    });
    $('#menu-3').hover(function(){ //third menu element

        var width = $(this).width();

        $('#line-menu').animate({
            'float': 'right',
            'width' : width
        },  "slow");
    });
});

あなたがそれを見ることができるようにcss

CSS:

#line-menu{
    height: 3px;
    width: 100px;
    position:absolute;
    z-index:50;
    background: #CC0000;
    margin-left:55px;
    padding-left:3px;
    padding-right:3px;
}
#line-menu-container{
    text-align: center;
    min-width: 617px;
    max-width: 1113px;
    margin-left: auto;
    margin-right: auto;
}

これは矛盾している部分です

HTML:

<header> 
    <div id='menu'>
        <div class='menu-element' id='menu-1'>HORARIOS</div>
        <div class='menu-element' id='menu-2'>UBICACI&Oacute;N</div>
        <div class='menu-element' id='menu-3'>CONTACTO</div>
    </div>
</header>

   <div id='line-menu-container'> //the line contained in a container just to fix the centered position
       <div id='line-menu' ></div>
   </div>

私が使用するjqueryライブラリはhttps://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.jsです

直し方がよくわからないので質問させていただきます...

編集：しばらく（2年）経ちました。これをもう一度行う必要がある場合は、twitter ブートストラップのようなフレームワークを使用するなど、抽象化を使用します。車輪を再発明する必要はありません。

4

1 に答える 1

3

float絶対配置要素にプロパティを使用することはできません。実際には何も変更しないので、position: relative代わりに使用してください。

widthホバーされた要素のleftオフセットに従って要素を配置したいようです。プロパティの代わりにoffsetメソッドと CSSプロパティを使用できます。leftfloat

$(document).ready(function () {    
    var $first = $('#menu-1'), $line = $('#line-menu');
    $line.css({
        'width' : $first.width(),
        'left'  : $first.offset().left
    });
    $('#menu > div').mouseenter(function(){
        var $this = $(this),
            width = $this.width(),
            left  = $this.offset().left;

        $line.stop().animate({
            'left'  : left,
            'width' : width
        },  "slow");
    });
});

http://jsfiddle.net/2dwJR/

于 2012-12-29T21:06:24.800 に答える