HTML classes in menu with Wordpress

Question

I’m developing a theme with Wordpress and I would like the same to possess a menu dropdown. I created some pages like Home. Quem Somos, Contato and a category called Produtos would like the category to be a dropdown showing all posts in that category but how can I check and apply the classes referring to dropdown with Wordpress?

Answer 1

In this case you need to first organize the hierarchy of the menu. This is usually done when using a framework, for example, the CSS is already formatted, but as you are making a theme, you will have to sew this into your code.

A simplified way to do this would be to register the following function for your main menu within the functions.php of its theme.

Put something like:

add_theme_support( 'menus' );

function register_theme_menus () {
    register_nav_menus( [
        'primary-menu' => _( 'Menu principal' )
    ] );
}

add_action( 'init', 'register_theme_menus' );

In his header.php, where you are currently calling the main menu, add the following code to call the menu that we have previously recorded (you can also add the same in specific parts as you wish).

<nav id="menu">
    <?php wp_nav_menu(array('theme_location'=>'primary-menu')); ?>
</nav>

Example CSS, but it is important that you customize according to your interest:

/* Primeiro nível - Hierarquia */
nav#menu ul li {float:left; position:relative; text-transform:uppercase; list-style:none}
nav#menu ul li a {display:block; background:#152635; color:#fff; padding:5px 15px; font-size:14px;}

/* Primeiro nível - Hierarquia */
nav#menu ul li ul {display:none;}
nav#menu ul li ul li a {width:160px;}
nav#menu ul li:hover ul {display:block; position:absolute; top:26px;}

/* Terceiro nível - Hierarquia */
nav#menu ul li ul li ul li {list-style:inside square}
nav#menu ul li ul li ul li a {font-size:11px; color:#ddd}

I hope I’ve helped. ;)