Avatar of b24
b24

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

JavaScriptJScriptWeb Development

Avatar of undefined
Last Comment
b24

8/22/2022 - Mon