Home/ Questions/Q 6955995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:48:36+00:00

I am using a Jquery Toggle sidebar menu, so there is a down arrow

  • 0

I am using a Jquery Toggle sidebar menu, so there is a down arrow in the menu to push the menu down to show sub-menu(s) every time you click on it. My problem is when there is no child menu/sub-menu, the down arrow is still showing up, and when you click on it, it eats the same level menu below. I am using the menu in Silverstripe. How can I make the arrow shows only when there is a child menu/submenu?

/———————————————–Here is my toggle menu js————————————————–/

$(document).ready(function() {

$('.second_level').hide();

$("div.menu > h3").css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");

$('div.menu > h3').click(function() {

$(this).next().slideToggle('fast', function() {

//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {

$(this).prev().css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");
} else {
$(this).prev().css("background", "url(themes/tutorial/images/menuarrowup.gif) no-repeat right");
}
return false;
});
});
});

/————————————Here is my html code———————————————-/

<div id="productmenu"> <!-- productmenu starts -->
<div class="menu">                      
  <h3><a href="#">Category 1</a></h3>
    <ul class="second_level">
      <li><a href="page.html">Option 1</a></li>
      <li><a href="page.html">Option 2</a></li>
   </ul>
</div> <!-- /menu -->

<div class="menu">

   <h3><a href="#">Category 2</a></h3>

</div> <!-- /menu -->

<div class="menu">
  <h3><a href="#">Category 3</a></h3>
     <ul class="second_level">
      <li><a href="page.html">Option 1</a></li>
       <li><a href="page.html">Option 2</a></li>
      <li><a href="page.html">Option 3</a></li>
    </ul>
</div> <!-- /menu -->
</div><!-- /productmenu -->

/————————————Here is my page.ss———————————————-/ 

  <% control Menu(2) %>

     <h3><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></h3>

        <% if Children %>   <ul class="second_level">
              <% control Children %>
               <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
              <% end_control %></ul>

        <% end_if %>
  <% end_control %>

Your help is appreciated. Please see example pic below.

Thanks
Sam

enter image description here

Edit: To fix the eating up menu issue, just move <% control Menu(2) %> above and <% end_control %> below the finish div of menu. Js solution is to use Matt’s new Js. Thanks Matt, Iank and Milo! I appreciate your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You never tell your system to not print the down arrow if no child exists. It adds the arrow to every H3 that exists in them menu and never considers if it has children or not. So we need to check each menu item to see if it has children. The following should do that:

    $("div.menu").each(function(){

  if($(this).children().length > 1) // See if the H3 is the only child
  {
      $(this).children("H3").css("background", "url(themes/tutorial/images/menuarrowdown.gif) no-repeat right");
  }

});

    Presently I’m on lunch break and do not have time to fully test this. I have no verified this will work.

    EDIT: Modified code after Sam put in his pure HTML.

    EDIT2: After Sam supplied a fiddle, I forked it and made corrections.Fiddle: http://jsfiddle.net/GvGoldmedal/Wp2em/

    • 0