Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #724363

    Is it possible to change the icon-menus behavior (as shown in this demo: http://kriesi.at/themes/enfold-creative-studio/)
    I want it to open a sub-pages on a new “page” instead of showing the sub-pages under when hovering.

    Let’s say I have a menu with the following menu-items.
    Item 1 – with 2 sub-items
    Item 2 – with 2 sub-items
    Item 3 -with 2 sub-items

    Is it possible to make menu opening a sub-menu with the sub-items when clicking on Item 1 instead of going to Item 1’s page?
    So the sub-items generates a new menu when clicking on of the main menu items?

    Does it makes sense?

    #725425

    Hey!

    I am not sure if i understood you. Do you have an example site where we can see the feature you would like to recreate?

    Best regards,
    Yigit

    #726631

    You can see an example of the idea here:
    https://demo.responsive.menu/pro-example-one/

    On click on the arrow newx to a menu-item a sub-menu folds out.

    Either that – or if it’s not possible – a solution where the sub-menu folds out like an accordion:
    https://demo.responsive.menu/free-example-one/

    Does it make sense?

    #728141

    Hi,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    We recommend to search for a plugin with such a feature. Uber menu was mentioned before by some other customers.

    Best regards,
    Andy

    #728168

    Hi,

    To expand or collapse the submenu items in mobile please add the necessary CSS to Quick CSS and Js code to functions.php file from this link http://pastebin.com/raw/ncACWHws

    CSS code:

    #mobile-advanced .hideSubmenu ul.sub-menu {
    display:none;
    }
    
    .subMenuIcon {
    display:inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 99999;
        font-size: 20px;
        background: gold;
        min-width: 48px;
        min-height: 48px;
        line-height: 48px;
        text-align: center;
       cursor:pointer;
    }
    @media only screen and (min-width:767px){
    .subMenuIcon { 
    display:none!important;
    }}

    Js Code:

    function ExpandSubmenuInMobile(){
    ?>
    <script>
        jQuery(document).ready(function() {              
          var menuItem    = jQuery('li.menu-item-has-children'),
              subMenuIcon = jQuery('.subMenuIcon');      
          menuItem.each(function() {        
            jQuery(this).prepend( "<div class='subMenuIcon'>+</div>" );
            jQuery(this).addClass("hideSubmenu");  
          });      
          jQuery(document).on('click', '.subMenuIcon', function () {
            console.log('menu was clicked');
            jQuery(this).closest('li.menu-item-has-children').toggleClass("hideSubmenu");
          });      
        });
    </script>
    <?php
    }
    add_action('wp_footer', 'ExpandSubmenuInMobile');

    Best regards,
    Vinay

    • This reply was modified 7 years, 6 months ago by Vinay.
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.