Home/ Questions/Q 4115422
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:34:48+00:00

I have a simple test css menu with dropdowns. I want one of the

  • 0

I have a simple test css menu with dropdowns. I want one of the menus to be a click rather than mouseenter – similar to the ‘more’ link on Google.
I’ve managed to do this with JQuery, but when the mouse leaves, the menu disappears.

How can I force the dropdown to remain until the user click somewhere else on screen, just like on Google?

Here is my test script:

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#mainNav .more").hover(
      function () {
         $("#mainNav li ul").css('display','none');
      }, 
      function () {
      });

   $("#mainNav .more a").click(function(){
      $("#mainNav li ul").css('display','block');
      $("#mainNav .more a").blur();
      return false;
   });

});
</script>
<style>
/*TOP LEVEL*/
#mainNav, #mainNav ul {padding: 0;margin: 0;list-style: none;list-style-image:none;}
#mainNav li a {display: block;padding:4px;margin-right:15px;color:#000;font-weight:bold;font-size:0.9em;}
#mainNav li {float: left;list-style: none;list-style-image:none;margin:0;}
#mainNav li a:hover{color:#ff000;text-decoration:none;}

/*DROPDOWN*/
#mainNav li ul {position: absolute;background-color: #eee;right: -999em;}
#mainNav li ul li{width:100%;margin:2px 0px 2px 0px;border:none;}
#mainNav li:hover ul { /*POPUP/DROPDOWN*/
    right:auto;
}

#mainNav li li a{width:100%;font-weight:normal;}
#mainNav li li a:hover{font-weight:bold;color:#000;}
#mainNav li li a, #mainNav li li a:visited {margin:0;padding-left:16px;padding-top:7px;padding-bottom:7px;}
</style>
</head>
<body>

 <ul id="mainNav">
            <li><a href="">Home</a></li>
            <li><a href="">Menu 1 (Mouseover)</a>
               <ul>
                  <li><a href="">1.1</a></li>
                  <li><a href="">1.2</a></li>
               </ul>
            </li>
            <li class="more"><a href="">Menu 2 (Click)</a>
               <ul>
                  <li><a href="">2.1</a></li>
                  <li><a href="">2.2</a></li>
               </ul>
            </li>
</ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would do it a little bit different. Add a click handler to the body that hides the menu items. This relies on the handler for the more link stopping propagation so that the link doesn’t disappear, but you’re already doing that by returning false from that handler. Note that if you have other handlers that also stop propagation, you should refactor to a common method so that each one of them can hide the menu as well. If you were ok with it going away whenever you go outside the menu, you could switch your hover functions around so that it gets hidden when not hovering over menu items.

    $(document).ready(function(){
    $("body").click( function() {
         $('#mainNav li ul').hide();
    });


   $("#mainNav .more a").click(function(){
      $("#mainNav li ul").css('display','block');
      $("#mainNav .more a").blur();
      return false;
   });

});

    Another way I’ve handled it is to also put up a DIV over the whole page (height and width of body), but under the menu using z-index. Attach the click handler to this DIV instead of the body. That is, all elements except the DIV and the menu items are at z-index 0. The DIV is at z-index 1 and the menu at z-index 2 (any numbers as long as they are ordered this way). The DIV then catches any clicks outside the menu removing the need for other elements to know about the menu. On click you hide the DIV as well as the menu. It’s a little bit more code, but probably worth it.

    $(document).ready(function(){
    $("div.modal").click( function() {
         $('#mainNav li ul').hide();
         $('#div.modal').hide();
    });


   $("#mainNav .more a").click(function(){
      $("#mainNav li ul").show();
      $("div.modal").show();
      $("#mainNav .more a").blur();
      return false;
   });

});

    HTML:

    <body>
<div class="modal">&nbsp; <!-- give it some content --></div>
...

    CSS:

    .modal {
   z-index: 1;
   display: none;
   width: 100%;
   height: 100%;
}

.#mainNav li
{
   z-index: 2;
}
    • 0