Aggiungere la classe dropdown di Bootstrap a un menu di navigazione

Question

Aggiungere la classe dropdown di Bootstrap a un menu di navigazione

26 lug 2017, 14:13:22

Visualizzazioni: 15.5K

Voti: 2

Come costruire questo menu in WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">La nostra storia</a></li>
                    <li><a href="#">La nostra visione</a></li>
                    <li class="dropdown">
                        <a href="#">Storia</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Storia 1</a></li>
                            <li><a href="#">Storia 2</a></li>
                            <li><a href="#">Storia 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Codice WordPress:

<div class="collapse navbar-collapse" id="collapse-1">

<?php
wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );
?>

</div>

sevoug

21

menu navigazione twitter bootstrap

Commenti

Qual è il tuo codice per costruire un menu di navigazione senza la classe dropdown?

Max Yudin

26 lug 2017 14:15:30

Segui questo link, avrai un'idea. https://codex.wordpress.org/WordPress_Menu_User_Guide

TMA

26 lug 2017 14:16:11

   <?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => false ) ); ?>

            </div>

sevoug

26 lug 2017 14:16:52

Per Bootstrap 5: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

Lars Flieger

26 mag 2021 14:21:36

Tutte le risposte alla domanda

Commenti

Sai se Navwalker funziona con Bootstrap 5?

Lars Flieger

25 mag 2021 12:17:25

@Lars Non essere timido. Google è tuo amico. 1, 2 e così via.

Max Yudin

27 mag 2021 10:04:29

Max Yudin 6.38K · Answer 1 · 2017-07-26T14:42:03Z

Il modo più semplice per farlo è utilizzare una soluzione già pronta. Esiste una classe WP_Bootstrap_Navwalker che estende la classe nativa di WordPress Walker_Nav_Menu e rende i tuoi menu di navigazione pronti per Bootstrap 3 o 4. Scaricala da GitHub.

Aggiungila al tuo tema, poi inserisci il seguente codice nel file functions.php:

<?php
require_once('percorso-della-directory/wp-bootstrap-navwalker.php');

Sostituisci percorso-della-directory/ con il percorso corretto per le tue esigenze.

Successivamente, modifica la tua chiamata wp_nav_menu() con il seguente codice:

<?php
wp_nav_menu( array(
    'menu'              => 'header', // inserisci il nome del tuo menu
    'theme_location'    => 'header',
    'container'         => 'div', // non è necessario racchiudere `wp_nav_menu` manualmente
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Utilizza un Walker differente
));

Nota che non avrai più bisogno del <div class="collapse navbar-collapse" id="collapse-1"> poiché verrà aggiunto automaticamente da wp_nav_menu() con le classi CSS e l'id corretti.

Inoltre, leggi attentamente il file README.md di WP_Bootstrap_Navwalker.

Jiwan 41 · Answer 2 · 2018-06-01T17:00:30Z

La soluzione più semplice in questo caso sarebbe utilizzare jQuery. Puoi aggiungere una nuova classe nel tuo file functions.php per verificare se la voce del menu ha elementi figli e poi aggiungere attributi a quell'elemento oppure utilizzare anche bootstrap nav walker. Qui opterò per la soluzione più semplice.


    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });

Basta copiarlo e incollarlo nel tuo footer.php. Per maggiori dettagli http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item

Elidrissi simo 85 · Answer 3 · 2017-07-26T14:38:32Z

Puoi utilizzare la classe Walker_Nav_Menu se desideri modificare il markup predefinito del menu di WordPress.

https://codex.wordpress.org/Class_Reference/Walker

https://www.youtube.com/watch?v=IqTMhmjTBoE&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=19

Elidrissi simo

85

26 lug 2017 14:38:32