Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Main Menu Dropdown?

Main Menu Dropdown?

Scheduled Pinned Locked Moved General Discussion
10 Posts 3 Posters 17.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    daslicht
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      Hey,
      first you can put menu points underneath a menupoint like this to have submenus:
      Screen Shot 2016-05-09 at 09.52.34.png

      Then on the frontend you will see in your code that you have a <ul class="submenu">
      Screen Shot 2016-05-09 at 09.53.06.png

      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

      1 Reply Last reply
      0
      • D Offline
        D Offline
        daslicht
        wrote on last edited by
        #3

        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)

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          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.

          D 1 Reply Last reply
          0
          • arminunruhA 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.

            D Offline
            D Offline
            daslicht
            wrote on last edited by daslicht
            #5

            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 ?

            1 Reply Last reply
            0
            • D Offline
              D Offline
              daslicht
              wrote on last edited by daslicht
              #6

              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;
              });
              
              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7
                $(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!

                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  daslicht
                  wrote on last edited by
                  #8

                  @arminunruh said:

                  "nav.primary a",

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

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

                    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"

                    1 Reply Last reply
                    0
                    • E ErEs referenced this topic on
                    • A Offline
                      A Offline
                      arrie
                      wrote on last edited by
                      #10
                      This post is deleted!
                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      M
                      margotlego
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search