1

メインナビゲーションバーの下にスライダーを作成しようとしているので、ユーザーがメインアイテムの上にマウスを置くと、スライダーがマウスに追従します。これはほとんどの場合機能しますが、スクロールアウトするとメニュースライドが下に留まりませんメニュー項目。これは固定位置が原因​​ですが、固定位置がないとこれを機能させることができません...本当に行き詰まりました

ここに私のコードCSSがあります

#navbar {
position: relative;
width: 980px;
height: 29px;
}
/* MENU SLIDER */
/*#slider-container{ position: relative;}*/
#slider-container {
height: 5px;
width: 980px;
position: relative;
}
#menu-slide {
height: 4px;
width: 52px;
background: url(../images/pictures/large/system-files/glowbg.png) no-repeat;
font-size: 1px;
line-height: 1px;
z-index: -5;
position: fixed;
display:inline-block;
}

今残り

<!DOCTYPE html>
<html>
<head><title>Bretts Gaming</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source Sans Pro"> 
<link href="./css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./css/superfish.css" media="screen">
<!--[if IE]>
    <link href="./css/style2.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./css/superfish2.css" media="screen">
<![endif]-->
<script type="text/javascript" src="javascript/jquery-1.8.2.js"></script>
<script type="text/javascript" src="javascript/go.fullBg.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<script type="text/javascript" src="javascript/hoverIntent.js"></script>
<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
     var left = $('.first').offset().left + ($('.first').width() / 2 - 15 );
        $('#menu-slide').stop().animate( {left: left  }, 400 );
    $('li').mouseover( function() { 
        var left = $(this).offset().left + ($(this).width() / 2 - 20 );
        $('#menu-slide').stop().animate( {left: left  }, 400 );
    });
    $('li').mouseleave(function(){
         var left = $('.first').offset().left + ($('.first').width() / 2 - 20);
         $('#menu-slide').stop().animate( {left: left  }, 400 );
    }); 
 });
</script>
</head>
<body>     
 <div id="topnav">                    
            <ul id="navbar"class="sf-menu">
                <li class="current first"><a href="#a">HOME</a></li>
                <li><a href="#">ABOUT US</a>
                    <ul>
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                    </ul>
                </li>
                <li><a href="#">CORPORATE</a></li>
                <li><a href="#">CRUSING</a></li>
                <li><a href="#">LEISURE</a></li>
                <li><a href="#">GROUPS</a></li>
                <li><a href="#">VIRTUOSO</a></li>
                <li><a href="#">LINKS</a></li>
                <li class="last"><a href="#">CONTACT</a></li>
            </ul>
            <div id="slider-container">
                <div id="menu-slide"></div>
            </div>
</div>
</body>
</html>

どんな助けでも素晴らしいだろう

ありがとうございました

4

0 に答える 0