Question

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

我想单页滚动网站，顶部有一个简单的固定位置菜单，在页面滚动期间没有动画，我从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>

请帮我解决这个问题：）

由于

Answer 1

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

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

其次你已经摆脱了“$（”＃example-one“）。append（”“）;”魔术线脚本的行和硬编码的魔术线，我不确定动画会这样工作

Answer 2

这里有一些与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>

使用jquery为wordpress中的current_page_item突出显示设置动画

2 个答案: