0

我正在创建一个用于投资组合和学习目的的网站，而且我是网络编程的新手，如果我在代码中犯了一些愚蠢的错误，我很抱歉:)

我想在顶部有一个简单的固定位置菜单的单页滚动网站，在页面滚动期间几乎没有动画，因为我从http://css-tricks.com/jquery-magicline-navigation/获取了参考。这是我到目前为止所取得的成就http://www.pk-pixels.com

除了悬停事件之外，当用户向上或向下滚动页面时，我希望该行动画到下一个/上一个项目。所以我使用 jquery waypoints 插件来生成一个事件

当用户滚动页面时，我成功地将突出显示移动到当前项目，但唯一的问题是它没有动画（有时它会奇怪......），在这里我需要你的帮助，只是在页面滚动时使该行动画:)，这是我的 js

$(document).ready(function() {  
var $menuline = $("#menuline");
linePosition($menuline);
$('#page1').waypoint(function() {
        $("#main-menu ul li").removeClass("current_page_item");
        $("#main-menu ul #link1").addClass("current_page_item");
        linePosition($menuline);
}, { offset: -10 });

$('#page2').waypoint(function() {   
   $("#main-menu ul li").removeClass("current_page_item");
   $("#main-menu ul #link2").addClass("current_page_item");
  linePosition($menuline); 
});
});
function linePosition($menuline)
{
$menuline
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left);
var $linewidth = $menuline.width();
    var $lineposition = $menuline.position().left;

 $menuline.animate({
        width: $linewidth,
            left: $lineposition
       });
}

这是菜单的html代码

   <nav id="main-menu">
      <ul>
        <li class="current_page_item" id="link1"><a href="#">Home</a></li>
        <li id="link2"><a href="#">About Us</a></li>
        <li id="link3"><a href="#">Services</a></li>
        <li id="link4"><a href="#">Projects</a></li>
        <li id="link5"><a href="#">Contact Us</a></li>
    <div id="menuline-container">
            <div id="menuline"></div>
        </div>
     </ul>          
     <!-- <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> --> 
   </nav>

请帮我解决这个问题：）

谢谢

4

2 回答 2

0

这是一些与 current_page_item 类相关的代码 - 如果没有这样的东西，动画将无法工作 

<nav id="main-menu">

    <li id="link1" role="navigation" class="page_item <?php if(is_page('home')) echo ' current_page_item'; ?>"><a href="home">Home</a></li>

    <li id="link2" role="navigation" class="page_item <?php if(is_page('about-us')) echo ' current_page_item'; ?>"><a href="about-us" >About Us</a></li>

    <li id="link3" role="navigation" class="page_item <?php if(is_page('Services')) echo ' current_page_item'; ?>"><a href="Services" >Services</a></li>


    /*this link has multiple pages still highlighting Projects as the current_page_item in the case that you have subpages under one menu link*/
    <li id="link4" role="navigation" class="page_item <?php if(is_page('projects')) echo ' current_page_item'; ?><?php if(is_page('project_1')) echo ' current_page_item'; ?><?php if(is_page('project-2')) echo ' current_page_item'; ?><?php if(is_page('project-3')) echo ' current_page_item'; ?>"><a href="videos" title="link to videos">Projects</a></li>

    <li id="link5" role="navigation" class="page_item <?php if(is_page('contact-us')) echo ' current_page_item'; ?>"><a href="contact-us" >Contact Us</a></li>

     </ul>

    </nav>
于 2014-06-23T23:15:14.100 回答
0

只是一些可能有帮助的想法

首先为每个菜单项创建真正的页面链接，而不仅仅是 # 因为下面的代码取决于当前页面的工作页面链接

其次，您已经摆脱了 "$("#example-one").append("");" 魔术线脚本的行并对魔术线进行硬编码，我不确定动画是否会以这种方式工作

于 2014-06-23T23:11:03.010 回答