asked on

Hide/Expand menu with javascript (again)

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

Sudhindra A N

you can try this..
http://javascript-array.com/scripts/simple_drop_down_menu/

Sudhindra A N

check this one also, you may like it.
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

Zyloch

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

b24

ASKER

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.

Zyloch

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

ASKER

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

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b24

ASKER

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

ASKER

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

Zyloch

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

b24

ASKER

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