jQuery vertical accordion menu problem

b24 used Ask the Experts™

on 2011-05-15

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

Do more with

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

View Solution Only

Vipul Patel.NET Expert

Commented: 2011-05-15

Hi, I have modified the below code little bit.

But it works fine in any case and its browser compatible!

By the way, Good menu.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        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;
        }
    </style>
</head>
<body>
    <div id="main_menu">
        <ul id="nav">
            <!-- Start of CMS Top Menu Object -->
            <li class="link menuitem selected"><a href="">H</a></li>
            <li class="link menuitem"><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 menuitem"><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 menuitem"><a href="">Q</a></li>
            <li class="link menuitem"><a href="" class="enclose">C</a></li>
            <!-- End of CMS Top Menu Object -->
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initMenu() {
            $('#nav ul').hide();
            $('#nav ul:first').hide();
            var menus = $('#nav .menuitem');
            $('#nav .menuitem').hover(function () {
                var menu = $(this);
                var prevSelectedMenu = $(menus).filter('.selected');
                prevSelectedMenu.removeClass('selected');
                prevSelectedMenu = $('ul', prevSelectedMenu);
                menu.addClass('selected');
                var submenu = $('ul', menu);
                if (!submenu.is(':visible')) {
                    //console.log('show');
                    prevSelectedMenu.slideUp('normal');
                    submenu.slideDown('normal');
                }
            },
             function (e) {
                 //Comparing with main menu id  <div id="main_menu">
                 if ($(e.relatedTarget).attr('id') != 'main_menu') return;
                 var menu = $(this);
                 var submenu = $('ul', menu);
                 if (submenu.is(':visible')) {
                     submenu.slideUp('normal');
                     return false;
                 }
             });
        }
        $(document).ready(function () { initMenu(); });
    </script>
</body>
</html>

Open in new window

b24

Author

Commented: 2011-05-15

Hi Vrluckyin,

Unfortunately I don't have access to the html to change it so it has to stay exactly as it is.

Is there anything you can suggest to get this effect (which is perfect by the way) but with the html provided?

Thanks a million for all your help.

<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

Vipul Patel.NET Expert

Commented: 2011-05-16

Unfortunately I don't have access to the html to change it so it has to stay exactly as it is?
But you have access of javascript?

I hope so some one will provide you the solution.

Thank you very much.

Vipul Patel.NET Expert

Commented: 2011-05-23

Can you close the question?

Hi moderator,
Can you please take necessary steps to close the questions?

Thanks

Do more with

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

jQuery vertical accordion menu problem

Premium Content

Premium Content

Explore our Suite of Services