¿Cómo hacer que el elemento del menú de nivel superior no tenga vínculo, pero tenga submenús vinculados?

Creeelelemento demenú "Enlacespersonalizados" y agregue "javascript :;"(sin comillas)parael campo URL.Estaes unamejormanera que usar "#"porqueno desplazará supágina hacia laparte superior cuando se haga clicen ella.

Create "Custom Links" menu item and add "javascript:;" (without quotes) for the URL field. This is better way than using "#" because it won't scroll your page to the top when clicked.

Lo resolví deestamanera:en header.php (de sutema)busqué:

 'link_before'     => '',
'link_after'      => '',
 

y reemplazadopor:

 'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',
 

Enpalabras simples,esta secuencia de comandos verifica si su vínculoprincipaltermina con "#",en este caso agrega unelemento span alrededor del contenido de laetiqueta A,queinhabilitael clic.

Espero quete ayude :-)

I solved this way: in header.php (of your theme) I searched for:

'link_before'     => '',
'link_after'      => '',

and replaced with:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

In simple words, this script checks if its parent link ends with "#", in this case it adds a span element around the content of the A tag, that disables the click.

Hope it helps :-)

Como otros han sugerido aquí,puede crear unelemento demenú deenlacepersonalizado conel # como su URL.Luegoborreel # una vez que se agregue almenú.Yfinalmente,puede usaresta simpleexpresión regularpara quitar laetiqueta real deesosenlaces.

 preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
 

As others here have suggested you can create a custom link menu item with the # as its url. Then erase the # once it is added to the menu. And finally, you can use this simple regex to strip the actual tag from those links.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);

Estoeliminaráel clic (y quitaráelestilo delelemento).Deestamanera,notiene que usar los #enlacespersonalizadosen sumenú.

 add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );
 

This will remove the click (and unstyle the item). This way, you dont have to use the custom # links in your menu.

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );

Me doy cuenta de que lleguétardeen eljuego,peroestos son los dosmétodos que utilizo:

1) Haga queelelemento delmenúprincipal sea un duplicado delprimer subelemento y cambie suetiqueta.Porejemplo,sielprimerelemento de "Productos"es "Producto 1",use "Producto 1" comoelemento delmenúprincipal y luego cambie suetiqueta a "Productos".Deesamanera,tanto "Productos" como "Producto 1" conducirán a lapágina Producto 1.

2) Agregue un redireccionamientopara que lapágina de Productos se redirija al Producto 1. Elbeneficio deesta opciónes que lepermite crear unapágina de Productosen blancopara crear una listajerárquicaen Pages,pero si alguienintentair alapágina de Productosen blanco,serán redirigidos.

I realize I'm late in the game, but these are the two methods I use:

1) Make the parent menu item a duplicate of the first sub-item, and change its label. For example, if the first item under "Products" is "Product 1", use "Product 1" as the parent menu item, then change its label to "Products". That way, both "Products" and "Product 1" will lead to the page Product 1.

2) Add a redirect so that the Products page is redirected to Product 1. The benefit of this option is that it allows you to create a blank Products page to create a hierarchical listing in Pages, but if anyone tries to go to the blank Products page, they will be redirected.

Vaya a Apariencia,luego haga clicen losmenús.Enesta sección vaya a laestructura delmenú y haga clicen laflecha hacia abajoparaexpandir lapágina y verá un cuadro que dice deshabilitarenlace.Marqueesa casilla yguarde.

Go to Appearance, then click on menus. In this section go under menu structure and click on the arrow down to expand the page and you'll see a box that says disable link. Check that box and save.

1. Establezcael vínculopersonalizadoen #,queno devolveránada. Elemento de la lista

2. Agregueestefiltro:

    add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }
   

3. Edite span CSSpara obtenerelmismoestilo que <a>,no olvide cursor: context-menu;.

1. Set the custom link to # which won't return anything List item

2. Add this filter:

   add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
   
   function wpse_remove_empty_links( $menu ) {
   
       return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
   
   }
   

3. Edit span CSS to get same style as <a>, don't forget cursor: context-menu;.

Escribiendo desde 1/2019,la solución queproduce HTML5 adecuadoes hacer lo siguiente.

1. Agregue un vínculopersonalizado con la URLestablecidaen # yelnombre que desee.Ambos campos son obligatorios.
2. Editeelenlacepersonalizado recién agregadopara que la URLesté vacía.
3. Guarde los cambios.

Estoproducirá unanavegación denivel superior quees <a>Menu</a>,quees laforma correcta de representar unenlaceen el queno sepuede hacer clic.

Writing from 1/2019, the solution that produces proper HTML5 is to do the following.

1. Add a Custom Link with the URL set to #, and whatever name you'd like. Both fields are required.
2. Edit the newly added Custom Link so that the URL is empty.
3. Save the changes.

This will produce a top level nav that is <a>Menu</a> which is the correct way to represent a non-clickable link.

Puede desactivar loseventosen laetiqueta <a>paratodos loselementos delmenú deprimernivel utilizando CSSpuro.La clase .main-menupuedetener otronombre de acuerdo conelnombre de sumenú.

 /* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}
 

You may disable the events on the <a> tag for all first level menu items using pure css. .main-menu class may have another name according to your menu naming.

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}

Cree unmenú deenlacepersonalizado como se dice.Veael códigofuente ybusqueel href del submenú,porejemplo: #mm-1.Pegueestoen la URL delenlacepersonalizado yguardeelmenú.Esto hará que la versiónmóviltambiénfuncione cuandotoqueeltexto delmenú.

Create a custom link menu as other as said. View the source code and look for the href of the submenu, for example: #mm-1. Paste this into the URL of the custom link and save the menu. This will make the mobile version work as well when you tap the menu text.

Mi versión se ve así:

primero,en elmenúen elpanel de administraciónen elenlace deseadoen el campo hrefponga # o déjelo vacío,y luegoen function.php se añadentemas:

 function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );
 

Puede reemplazar 'div' con cualquierelemento que le convenga.

Estofuncionapara la versión 5.3.2 (probadoen esta versión,pero deberíafuncionaren otrastambién).

Enestaforma,eltrabajo detodos los argumentos 'before','after','link_before','link_after',etc. de wp_nav_menu() se conserva.

Además,estotambiénfuncionapara submenús.

My version looks like this:

first, in the menu in the admin panel in the desired link in the href field put # or leave it empty, and then in function.php themes are added:

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

You can replace 'div' with any element that suits you.

This works for version 5.3.2 (tested in this version, but should work in others too).

In this form, the work of all arguments 'before', 'after', 'link_before', 'link_after', etc. from wp_nav_menu() is preserved.

Also, this works for sub-menus too.

Sepuedeencontrar una soluciónmuchomás sencillaen otrapregunta:

Menú de administrador: resalteelmenú denivel superior cuandoestéen unapágina de submenú (sinmostrarel submenú)

Busque la respuesta de Askelon.Funcionaperfectamente,sinnecesidad de realizarpreg_replaces ojquery.

Much easier solution can be found on another question:

Admin Menu - Highlight top-level menu when on a sub-menu page (without showing sub-menu)

Look for Askelon's answer. Work's perfectly, without needing to do any preg_replaces or jquery.