Блог

Я создаю веб-сайт для портфолио и обучения, и я новичок в веб-программировании, поэтому извините, если я допустил какую-то глупую ошибку в коде 🙂

Я хочу создать сайт с прокруткой одной страницы с простым меню с фиксированной позицией вверху, с небольшой анимацией во время прокрутки страницы, для чего я взял ссылку из 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>
  

Пожалуйста, помогите мне в этом 🙂

Спасибо

Просто несколько идей, которые могут помочь

Во-первых, создайте реальные ссылки на страницы для каждого пункта меню, а не только #, поскольку приведенный ниже код зависит от того, какая ссылка на страницу является текущей страницей для работы

Во-вторых, вы должны избавиться от строки «$ («#example-one»).append («»);» скрипта magicline и жестко закодировать волшебную строку, и я не уверен, что анимация будет работать таким образом

вот некоторый код, который относится к классу 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>