Question

我试图在主导航栏下面创建一个滑块，这样当用户将鼠标放在主项目上时，滑块跟随鼠标，我有大部分工作但是当我滚动菜单时幻灯片没有留在菜单项下。这是因为固定的定位，但是如果没有固定的定位我就无法工作......真的卡住了

这是我的代码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>

任何帮助都很棒

谢谢

导航栏下的jquery滑块使用固定位置

0 个答案: