We help IT Professionals succeed at work.
Get Started

jQuery vertical accordion menu problem

b24
b24 asked
on
699 Views
Last Modified: 2012-05-11
Hi Experts,

Apologies for this duplicate entry. I closed a previous question before I realised there was still an issue with it.

I got much appreciated help from expert Zyloch to get to this point.

I have a html list menu (attached). I cannot alter the html in any way. I would like to have the menus expand and collapse on hover.

With the code attached, the menus expand and collapse when you hover on the parent link '#nav li a' but when you hover on the sublinks in that menu, it does not remain expanded.

The menu should remain expanded until you hover over another parent link or remove the mouse from the menu altogether.

Does any one have any ideas how to achieve this?

Many Thanks.
/* html */

<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>


/* CSS */


ul#nav, ul#nav ul 
{
  list-style-type:none;
  padding: 0;
  width: 228px; 
  margin:1px 0px 1px 1px;
}

ul#nav a 
{
  display: block;
  text-decoration: none;	
}

ul#nav li {
  margin-top: 1px;
}

ul#nav li a 
{
	width:197px;
	font-weight: bold;
	color: white;
	background: #005883 url(link_image.jpg) no-repeat 8px 9px; 
	margin-bottom: 1px; 
	padding: 7px 0 0px 31px;
	min-height:24px;
}

ul#nav li a:hover 
{

}

ul#nav li ul li a 
{
  color: #818085;
  background-color: #bcdeef; 
  padding-left: 30px;
  font-weight:normal;
  background-image:none;
  font-size:.9em;
}

ul#nav li ul li a:hover 
{
	text-decoration:underline;
}

.code 
{ 
	border: 1px solid #ccc; 
	list-style-type: decimal-leading-zero; 
	padding: 5px; 
	margin: 0; 
}

.code code 
{ 
	display: block; 
	padding: 3px; 
	margin-bottom: 0; 
}

.code li 
{ 
	background: #ddd; 
	border: 1px solid #ccc; 
	margin: 0 0 2px 2.2em; 
}

.indent1 
{ 
	padding-left: 1em; 
}

.indent2 
{ 
	padding-left: 2em; 
}



/*jQuery*/


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

Comment
Watch Question
.NET Expert
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE