Hide/Expand menu with javascript (again)

b24
b24 used Ask the Experts™
on
Hi Experts,

I've asked this question before and got an answer that I didn't end up using (see below). I went with a pure CSS menu instead. Unfortunately the client would prefer the smooth movement provided by a javascript or jquery menu.

I've tried to implement the code provided but it doesn't seem to work. Does anyone have an idea what code I should use for an expand on hover menu? And how to implement it?

i.e. sub menu would be hidden until the user hovers on the parent link at which time the sub menu would transition down vertically.

Any help would be greatly appreciated.

Many thanks in advance.

Previoulsy provided answer:
$(".link").hover(function(){
   $(this).find(".link").show();
},
function(){
   $(this).find(".link").hide();
});
<div id="main_menu">
          <ul id="nav">
            <!-- Start of CMS Top Menu Object -->
            <li class="link_selected"><a href="" >H</a></li>
            <li class="link"><a href="" >M</a>
              <ul>
                <li class="link"><a href="" class="enclose">C</a></li>
                <li class="link"><a href="" >L</a></li>
                <li class="link"><a href="" >V1</a></li>
                <li class="link"><a href="" >V2</a></li>
                <li class="link"><a href="" >V3</a></li>
                <li class="link"><a href="" >V4</a></li>
              </ul>
            </li>
            <li class="link"><a href="" >S</a>
              <ul>
                <li class="link"><a href="" class="enclose">C</a></li>
                <li class="link"><a href="" >T</a></li>
                <li class="link"><a href="" >G</a></li>
                <li class="link"><a href="" >I</a></li>
                <li class="link"><a href="" >P</a></li>
                <li class="link"><a href="" >C</a></li>
                <li class="link"><a href="" >M</a></li>
              </ul>
            </li>
            <li class="link"><a href="" >Q</a></li>
            <li class="link"><a href="" class="enclose">C</a></li>
            
            <!-- End of CMS Top Menu Object -->
          </ul>
        </div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004

Commented:
Let me illustrate with an example, and you can ask questions if you do not understand:

Menu:
<div id="main_menu">
  <ul id="nav">
    <!-- Start of CMS Top Menu Object -->
    <li class="link_selected"><a href="">H</a></li>
    <li class="link"><a href="">M</a>
      <ul class="submenu">
        <li class="link"><a href="" class="enclose">C</a></li>
        <li class="link"><a href="" >L</a></li>
        <li class="link"><a href="" >V1</a></li>
        <li class="link"><a href="" >V2</a></li>
        <li class="link"><a href="" >V3</a></li>
        <li class="link"><a href="" >V4</a></li>
      </ul>
    </li>
    <li class="link"><a href="">S</a>
      <ul class="submenu">
        <li class="link"><a href="" class="enclose">C</a></li>
        <li class="link"><a href="" >T</a></li>
        <li class="link"><a href="" >G</a></li>
        <li class="link"><a href="" >I</a></li>
        <li class="link"><a href="" >P</a></li>
        <li class="link"><a href="" >C</a></li>
        <li class="link"><a href="" >M</a></li>
      </ul>
    </li>
    <li class="link"><a href="">Q</a></li>
    <li class="link"><a href="" class="enclose">C</a></li>
    <!-- End of CMS Top Menu Object -->
  </ul>
</div>

Open in new window

Menu CSS:
.submenu {
    display: none;
}

Open in new window

Menu JavaScript:
$(".link").hover(function() {
    $(this).find(".submenu").show("fast");
}, function() {
    $(this).find(".submenu").hide("fast");
});

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

b24

Author

Commented:
Hi Zyloch,

Unfortunately I can't add the submenu class to the ul. The html is generated by software I can't get access to.

The html has to remain exactly as I added it.

Any ideas how to get around that with javascript?

thanks.
Top Expert 2004

Commented:
In that case you can use
$(".link").hover(function() {
    $(this).find("ul").show("fast");
}, function() {
    $(this).find("ul").hide("fast");
});

Open in new window

You will also want to make sure that initially the submenus are hidden, by running the following:
$(function() {
    $(".link").find("ul").hide();
});

Open in new window

Try and see if this works for you.
b24

Author

Commented:
Hi guys,

Sorry to be such a pain but I found a piece of jquery (by Marco van Hylckama Vlieg) that almost does what I need it to do. It expands the ul on hover perfectly but does not collapse it when you move the mouse outside the ul altogether.

Ideally I would like to have it that the menu only stays open while you're hovering on it or it's sublinks. Once you hover over a link without sublinks or outside the menu altogether, they should all appear in their collapsed state.

Would anyone have any idea how to implement that?

Thanks so much.
function initMenu() {
  $('#nav ul').hide();
  $('#nav ul:first').hide();
  $('#nav li a').hover(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#nav ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

Open in new window

Top Expert 2004
Commented:
You may try the following:
  $('#nav li a').hover(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#nav ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
      }
    },
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        checkElement.slideUp('normal');
        $('#nav ul:visible').slideDown('normal');
        return false;
      }
    }
  );

Open in new window

b24

Author

Commented:
Hi Zyloch,

Thanks again for your help.

The example code you've provided doesn't work as expected. When you move off the menu, it briefly closes but then opens again of its own accord. And if you've hovered over two menus with sublinks, they both stay open.

Any ideas?

Thanks again.
b24

Author

Commented:
Hi Zyloch,

I changed slideUp for slideDown in your example and it works now,

I've added the code here in case anyone else needs it but your answer was right.

Thank you so much. I really appreciate all your help.
function initMenu() {
  $('#nav ul').hide();
  $('#nav ul:first').hide();
$('#nav li a').hover(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#nav ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
      }
    },
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        checkElement.slideDown('normal');
        $('#nav ul:visible').slideUp('normal');
        return false;
      }
    }
  );
  }
$(document).ready(function() {initMenu();});

Open in new window

Top Expert 2004

Commented:
Yes, I apologize, I was a little confused with what the provided code did exactly, hence the difficulty.
b24

Author

Commented:
See my comment below and swap slideUp and slideDown. This solution then works perfectly.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial