Scrollspy wordpress

Question

Scrollspy wordpress

Asked 6 years, 4 months ago

Viewed 68 times

0

Good morning I would like a help am using wordpress and I put the following menu

class CSS_Menu_Maker_Walker extends Walker {

    var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
    var $classActive = 'teste';

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='".$this->classActive."'>\n";
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        // dd($item);
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';        
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $current = empty( $item->current );
        $current_item_parent = empty( $item->current_item_parent );

        /* Add active class */
        if( in_array('current-menu-ancestor', $classes) || in_array('current-menu-ancestor', $classes) ){
            $classes[] = 'menu-ativo a';
            unset($classes['current-menu-item']);
            $this->classActive = 'dropdown-item';
        }

        if(in_array('menu-item-has-children', $classes)) {
            $classes[] = 'has-sub';
            unset($classes['menu-item-has-children']);
        }

        /* Check for children */

        //    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
        //   // echo('children'); echo(' - '); dd($children);
        //    if (!empty($children)) {
            //          $classes[] = 'has-sub';
            //    }



            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

            $output .= $indent . '<li' . $id . $value . $class_names .'>';

            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'><span>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</span></a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

        function end_el( &$output, $item, $depth = 0, $args = array() ) {
            $output .= "</li>\n";
        }
    }

    function primeiraMaiuscula($s) {
        return mb_convert_case($s, MB_CASE_TITLE, "UTF-8");
    }

    function bloglite_breadcrumb() {
        global $post;
        echo '<ul id="trilha">';
        if (!is_home()) {
            echo '<li><a href="';
            echo get_option('home');
            echo '">';
            echo 'Início';
            echo '</a></li><li class="separador"> > </li>';
            if (is_category() || is_single()) {
                echo '<li>';
                the_category(' </li><li class="separador"> > </li><li> ');
                if (is_single()) {
                    echo '</li><li class="separador"> > </li><li>';
                    the_title();
                    echo '</li>';
                }
            } elseif (is_page()) {
                if($post->post_parent){
                    $anc = get_post_ancestors( $post->ID );
                    $title = get_the_title();
                    foreach ( $anc as $ancestor ) {
                        $output = '<li><a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separador">/</li>';
                    }
                    echo $output;
                    echo '<strong title="'.$title.'"> '.$title.'</strong>';
                } else {
                    echo '<li><strong class="captalize"> '.primeiraMaiuscula(get_the_title()).'</strong></li>';
                }
            }
        }
        elseif (is_tag()) { single_tag_title();}
        elseif (is_day()) { echo "<li>Arquivo de "; the_time('j \d\e F \d\e Y'); echo'</li>'; }
        elseif (is_month()) { echo "<li>Arquivo de "; the_time('F \d\e Y'); echo'</li>'; }
        elseif (is_year()) { echo "<li>Arquivo de "; the_time('Y'); echo'</li>'; }
        elseif (is_author()) { echo "<li>Arquivo do autor"; echo'</li>'; }
        elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { echo "<li>Arquivo do blog"; echo'</li>'; }
        elseif (is_search()) { echo "<li>Resultados da pesquisa"; echo'</li>'; }
        echo '</ul>';
    }

HTML:

<div id="cssmenu" class="menu-agency-main-menu-container"><ul id="menu-agency-main-menu" class="menu nav nav-pills"><li id="menu-item-13123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item"><a href="http://localhost/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">INÍCIO</span></a></li>
<li id="menu-item-13415" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-ativo a has-sub nav-item"><a class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">A EMPRESA</span><span class="holder" style="border-color: rgba(255, 255, 255, 0.35);"></span></a>
<ul class="dropdown-item nav nav-pills" style="display: block;">
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item nav-item dropdown"><a href="/a-empresa/#sobre" class="nav-link dropdown-item"><span>Sobre a SHEVAR</span></a></li>
    <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item nav-item dropdown"><a href="/a-empresa/#organograma" class="nav-link dropdown-item"><span>Organograma</span></a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item nav-item dropdown"><a href="/a-empresa/#equipe" class="nav-link dropdown-item"><span>A Equipe</span></a></li>
</ul>
</li>
<li id="menu-item-13388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub nav-item"><a href="http://localhost/produtos-e-servicos/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">PRODUTOS E SERVIÇOS</span><span class="holder" style="border-color: rgba(255, 255, 255, 0.35);"></span></a>
<ul class="dropdown-item nav nav-pills" style="display: block;">
    <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR PARTICIPAÇÕES</span></a>
    <ul class="dropdown-item nav nav-pills">
        <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#produtos-servicos" class="nav-link dropdown-item"><span>Gestão de Ativos Imobiliário</span></a></li>
        <li id="menu-item-10886" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#investimentos-participacoes" class="nav-link dropdown-item"><span>Investimentos e Particiáções</span></a></li>
        <li id="menu-item-10887" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#estruturacao-capital" class="nav-link dropdown-item"><span>Estruturação de Capital</span></a></li>
    </ul>
</li>
    <li id="menu-item-10888" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR PARTNERS</span></a>
    <ul class="dropdown-item nav nav-pills">
        <li id="menu-item-10889" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#credito-imobiliario" class="nav-link dropdown-item"><span>Originação de Crédito Imobiliário</span></a></li>
        <li id="menu-item-10890" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#operacao-credito" class="nav-link dropdown-item"><span>Estruturação de Operações de Crédito</span></a></li>
        <li id="menu-item-10891" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#cons-empresarial" class="nav-link dropdown-item"><span>Consultoria Empresarial</span></a></li>
        <li id="menu-item-10892" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#mercado" class="nav-link dropdown-item"><span>Pesquisa de Mercado</span></a></li>
        <li id="menu-item-10893" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#risco-ativos" class="nav-link dropdown-item"><span>Avaliações e Análise de Risco de Ativos</span></a></li>
        <li id="menu-item-10894" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#aquisicoes" class="nav-link dropdown-item"><span>Fusões e Aquisições</span></a></li>
    </ul>
</li>
    <li id="menu-item-13124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR SECURITIZADORA</span></a>
    <ul class="dropdown-item nav nav-pills">
        <li id="menu-item-13125" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-securitizadora/#operacao-credito2" class="nav-link dropdown-item"><span>Estruturações e Operações de Crédito</span></a></li>
        <li id="menu-item-13126" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-securitizadora/#venda-ativos" class="nav-link dropdown-item"><span>Compra e Venda de Ativos</span></a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-10895" class="menu-item menu-item-type-custom menu-item-object-custom nav-item"><a href="/parceiros" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">PARCEIROS</span></a></li>
<li id="menu-item-13171" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a href="http://localhost/contato/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">Contato</span></a></li>
</ul></div>

the problem is following when I scroll scroll it has to activate as the ID of the submenu or if I click and when I click it shows how all were active could help me to solve this problem?

I believe this might help you. It’s a jQuery plugin that does the Scrollspy project in Git with the documentation https://github.com/r3plica/Scrollspy. Demo of this Spy working https://codepen.io/r3plica/pen/NqbarV

– hugocsl

2018/07/24 at 13:45
guy did the test and unsuccessfully installed jquery 2.1.3 and the most error scrollspy scripts.js?ver=4.9.7:3 Uncaught TypeError: $(...).scrollspy is not a function
 at HTMLDocument.<anonymous> (scripts.js?ver=4.9.7:3)
 at j (jquery.js?ver=4.9.7:2)
 at Object.fireWith [as resolveWith] (jquery.js?ver=4.9.7:2)
 at Function.ready (jquery.js?ver=4.9.7:2)
 at HTMLDocument.I (jquery.js?ver=4.9.7:2)

– Filipe Nickel Sala

2018/07/24 at 14:25
You need to index jquery, right after scrollspy.js, and after that put the script $("#nav").scrollspy({ offset: -75 }); and remember to put the id="Nav" in your menu. This is just an option you can take a look at the documentation, or a searched that in Google has several plugins of the type.

– hugocsl

2018/07/24 at 14:30
1

I did exactly this plus gave error I’ll look for another plugin to take a look have some other that Voce indicates?

– Filipe Nickel Sala

2018/07/24 at 14:32

1 answer

Browser other questions tagged html css wordpress rolling

You are not signed in. Login or sign up in order to post.

by Filipe Nickel Sala • 95 points · Answer 1 · 2018-07-24T16:00:52+00:00

I managed with this jquery now just need it change using scroll

  //Deixa ativado o item que está ativo na pagina
        var url = window.location;
        $('#cssmenu ul ul li a').filter(function() {
            return this.href == url;
        }).parent().addClass('active');



    //Ação ao clicar deixa marcado a opção certa
        $('#cssmenu a').click(function() {
            var hash = $(this).attr('href');
            if (hash.indexOf('#') !== 1) {
                hash = '#' + hash.split('#').pop();
                window.location.hash = hash;
            }
            $('#cssmenu').find('.active').removeClass('active');
            $(this).closest('li').addClass('active');
        });