Wordpress posts in menu and custom classes

Question

I'm new to WordPress and I'm trying to convert a pure HTML Theme to a WordPress theme. But I have a problem that I can't find a solution for. In the nav menu, I can't find a way to selectively add classes to the ul and li elements that WordPress generates as a menu.

Basically, I need to set different classes for 1 depth element, for two depth element, and for 3 depth element, and also check if the item has children and then also set a different class.

Then I have to put onclick script inside li element (i know these are buttons, but I think it should work with generated li items as well

<div class="tab">
    <button class="tablinks active" onclick="openCategory(event, 'cat01')">Science</button>
    <button class="tablinks" onclick="openCategory(event, 'cat02')">Technology</button>
    <button class="tablinks" onclick="openCategory(event, 'cat03')">Social Media</button>
    <button class="tablinks" onclick="openCategory(event, 'cat04')">Car News</button>
    <button class="tablinks" onclick="openCategory(event, 'cat05')">Worldwide</button>
</div>

I know this is quite much to ask for, but I'd be thankful for the help of any kind...

Answer 1

Part of this has to be / can be done in the functions.php file of your theme, see https://developer.wordpress.org/reference/functions/wp_nav_menu/ , where you can define a container, its class, id etc.

The styles for the different menu levels can be achieved using according CSS selectors which contain combinations of direct child selectors, like nav.your_class > ul > li > ul > li > ul {... } and similar