Main Menu Dropdown?

[daslicht]

Hi,
what is the best way to add a Dropdown to the Main menu which displays all items titles of a Category, please?

I better ask before hacking your code :)

~
Marc

[arminunruh]

Hey,
first you can put menu points underneath a menupoint like this to have submenus:

Then on the frontend you will see in your code that you have a <ul class="submenu">

Now you can use custom css for styling that submenu. Having a dropdown functionality here, i think that may be possible with only CSS.

Good luck

[daslicht]

Thank you for the reply,

however I need to display the Names of the Items of a Category, and it's best automatically generated.

Let's say I have the following Projects

• This is the first Project Name ( category A )

• And I am the second ( category A )
  ...

• Project 3 ( category B )

• Project 4 ( category B )
  ...

Now I need the following Menu Link :

Category A

If you hover over the Category A Menu Item a dropdown should be shown with all Project names of category A:

Category A
-----This is the first Project Name (category A)
-----And I am the second (category A)

[arminunruh]

Ok in this case I think its best to create a child theme of lay theme and then put your custom php code into header.php of the child theme. This way your changes wont be overwritten when there is a lay theme update.

I created a child theme for you:
Download this file
lay-child.zip

Unzip it and put the folder lay-child in your themes folder. In lay-child there is a header.php file, it has the same content of the normal lay theme. You can modify that file to create your type of menu.

Here is a little description about child themes: https://codex.wordpress.org/Child_Themes
For Lay Theme you don't need to enqueue the parent style.css as described in that link.

It depends on your programming skills if thats the best way to go for you. If you code your own menu like that, the customizer options for menu style and mobile menu style won't be applied to your custom coded menu. So you have to take care of styling and of having a mobile menu yourself. Also anchor points of menu points in lay theme normally have these attributes: data-id, data-title, data-type. I'm using that to make the menu navigate the site using ajax.

If u're a developer and you just want to use lay theme for the layout capability (gridder) but code a lot by yourself, then lay theme might not be the right choice. Cause its mostly javascript that is minified :D . Soon I'm gonna work on a standalone version of the gridder as a plugin that should work with any wordpress theme and that could be the right choice for you.

[daslicht]

Hi,
thanks for the extensive reply !

Styling myself and the loose of the customizer is ok for me.

@arminunruh said:

Also anchor points of menu points in lay theme normally have these attributes: data-id, data-title, data-type. I'm using that to make the menu navigate the site using ajax.

More Interesting would be how to integrate the custom navigation into you workflow (you ajax event system).
Would I need to render the Navigation Client side or server side ?

I tryed to add a menu in the childs theme function.php like this :

if( !$menu_exists){
    $menu_id = wp_create_nav_menu($menu_name);

	// Set up default menu items
    wp_update_nav_menu_item($menu_id, 0, array(
        'menu-item-title' =>  __('Home'),
        'menu-item-classes' => 'home',
        'menu-item-url' => home_url( '/' ), 
        'menu-item-status' => 'publish'));

    wp_update_nav_menu_item($menu_id, 0, array(
        'menu-item-title' =>  __('Custom Page'),
        'menu-item-url' => home_url( '/custom/' ), 
        'menu-item-status' => 'publish'));

}

Interesting is here that I get the data attributes for home, but not for about:

<li id="menu-item-52" class="snip">
      <a href="http://local.site/"  data-type="page" data-id="18"><span>Home</span></a>
</li>
<li id="menu-item-53" class="snip">
      <a target="_blank" href="http://local.site/about/"data-type="custom"><span>About</span></a>
</li>

Is there another to create the menu directly in the layout ?

[daslicht]

HI Armin,

is there a way to disable the default action for specified Menu Items ?

I tried something like this, but the defaultAction is always fired:

$(document).on('click',  ".primary",  function(e) { //just trying to hijack all events :)
            e.preventDefault()
            console.log('click', e.target);
            return false;
});

[arminunruh]

$(document).on('click',  "nav.primary a",  function(e) { //just trying to hijack all events :)
            e.preventDefault()
            console.log('click', e.target);
            return false;
});

Probably it wasn't working cause you target .primary instead of .primary a
If you need to target a specific menu item, in "appearance"->"menus" you can give a menu item a custom class i think!

[daslicht]

@arminunruh said:

"nav.primary a",

Thanks I tried , same result , the navigation will still fire

[arminunruh]

Hmm, I see that you are using "$", but you need to use jQuery instead of $ i think. Cause the jquery thats used in wordpress isnt available through "$" but through "jQuery"