Reputation: 31

Show sub-menu on click

I would like to ask you for help. I'm trying to show submenu on click.

page: [www.marekmelena.eu][1]

On left side you can see few menus. They are created automatically by wordpress. I would like to have "sub2, sub3" hidden as default. But after click "#main" they should be visible.

I tried few solutions from this website already, but somehow it does not work.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
 there should be script, right?
</script>
</head>

I'm calling menu by:

 <div class="menu-style">
   <h4><?php $nav_menu = wp_get_nav_menu_object(6); echo $nav_menu->name; ?></h4>
   <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
 </div>

And this is result (i want to hide/show class submenu):

<h4>Hlavní menu</h4>

<div class="menu-hlavni-menu-container">
<ul id="menu-hlavni-menu" class="menu">
    <li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-61">
       <a href="http://marekmelena.eu/transparentni-ucet/">#main</a>
    <ul class="sub-menu">
       <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74">
        <a href="http://marekmelena.eu/sub2/">sub2</a>
         <ul class="sub-menu">
          <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
           <a href="http://marekmelena.eu/sub3/">sub3</a>
          </li>
         </ul>
       </li>
    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76">
      <a href="http://marekmelena.eu/sub2/">sub2</a>
        <ul class="sub-menu">
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
              <a href="http://marekmelena.eu/sub3/">sub3</a>
            </li>
        </ul>
    </li>
    </ul>
    </li>

    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-has-children menu-item-82">
     <a href="http://marekmelena.eu/transparentni-ucet/">Transparentní účet</a>
      <ul class="sub-menu">
        <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-83">
         <a href="http://marekmelena.eu/o-hw-world-kontakt/">O HW World, kontakt</a>
          <ul class="sub-menu">
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://marekmelena.eu/clankyblog/">Články/blog</a></li>
        </ul>
    </li>
    </ul>
    </li>
</ul>
</div>

Thank you for help!! :)

Upvotes: 3

Answers (2)

ciammarino

Reputation: 154

Start by hiding your sub-menu`

.sub-menu{
  display:none;
  }

then add some jQuery to show it when user clicks on "#main". If you want the user to be able to hide it when they click again, use the toggle method, otherwise you can use the show method.

I made a simple codepen example: http://codepen.io/ciammarino/pen/VmZrra

Good luck`

Upvotes: 0

Robiseb

Reputation: 1606

Use .toggle() to show or hide the .sub-menu element.

.toggle() documentation

or .slideToggle() to show or hide the .sub-menu element with a sliding motion for some extra "oohlala" (© Matthew Corway)

.slidetoggle() documentation

Don't forget to .preventDefault() to cancel the redirect event (click on a <a> with href).

.preventDefault() documentation

$(document).ready(function(){
  $('.menu-item > a').click(function(e){
    e.preventDefault();
    $(this).next('.sub-menu').slideToggle();
  });
});

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Hlavní menu</h4>

<div class="menu-hlavni-menu-container">
<ul id="menu-hlavni-menu" class="menu">
    <li id="menu-item-61" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-61">
       <a href="http://marekmelena.eu/transparentni-ucet/">#main</a>
    <ul class="sub-menu">
       <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74">
        <a href="http://marekmelena.eu/sub2/">sub2</a>
         <ul class="sub-menu">
          <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
           <a href="http://marekmelena.eu/sub3/">sub3</a>
          </li>
         </ul>
       </li>
    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76">
      <a href="http://marekmelena.eu/sub2/">sub2</a>
        <ul class="sub-menu">
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
              <a href="http://marekmelena.eu/sub3/">sub3</a>
            </li>
        </ul>
    </li>
    </ul>
    </li>

    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-has-children menu-item-82">
     <a href="http://marekmelena.eu/transparentni-ucet/">Transparentní účet</a>
      <ul class="sub-menu">
        <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-83">
         <a href="http://marekmelena.eu/o-hw-world-kontakt/">O HW World, kontakt</a>
          <ul class="sub-menu">
        <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://marekmelena.eu/clankyblog/">Články/blog</a></li>
        </ul>
    </li>
    </ul>
    </li>
</ul>

Upvotes: 1

Show sub-menu on click

Answers (2)

Related Questions