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