Home/ Questions/Q 1000207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T07:28:36+00:00

I’m in the process of learning Javascript and I’m trying to create a simple

  • 0

I’m in the process of learning Javascript and I’m trying to create a simple dropdown menu. An example of my desired functionality can be seen on the google homepage in the top menu with the “more” and “settings” dropdown. Specifially the click off the menu and the menu disappears.

Maybe onblur() isn’t the correct function to call. I don’t know.
I have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 

<style type="text/css"> 
a 
{ 
    color:blue; 
} 

.info ul.submenu 
{ 
    border: solid 1px #e0e0e0; 
    background-color: #fff; 
    position: absolute; 
    padding: 0; 
    z-index: 2; 
    display: none; 
} 

.info ul.submenu li 
{ 
    display: block; 
    border-top: solid 1px #e0e0e0; 
    margin: 0px 10px 0 10px; 
} 

.info ul.submenu li a 
{ 
    display: block; 
    padding: 7px 0px 6px 0; 
    color: #1177ee; 
    cursor:pointer; 
} 

</style> 

<script type="text/javascript"> 

function menu(id) {    
    var myLayer = document.getElementById(id);    

    myLayer.onblur = function() {      
        myLayer.style.display = 'none';  
    };  

    if (myLayer.style.display == "none" || myLayer.style.display == "") {    
        myLayer.style.display = "block";    
    } else {    
        myLayer.style.display = "none";    
    }    
} 

</script> 
</head> 

<body> 
<div class="info">    
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text   
     <a onclick="menu('id2');">Another Link</a> | more text   
     <ul id="id1" class="submenu">    
       <li><a href="dfhdfh">A1</a></li>    
       <li><a href="aetjetjsd">A2 This is Long</a></li>    
       <li><a href="etetueb">A3</a></li>    
     </ul>    
    <ul id="id2" class="submenu">    
       <li><a href="dfhdfh">B1</a></li>    
       <li><a href="aetjetjsd">B2</a></li>    
       <li><a href="etetueb">B3</a></li>    
     </ul>    
  </div>   
</body> 
</html>

The onblur event just simply doesn’t work. I have no idea why.

(Yes I know I shouldn’t be using a closure)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not firing because the UL never receives focus. Just showing it does not give it focus.

    Two ways to solve it:

    1. Add tabindex to both ULs and call myLayer.focus(); after you show it inside the menu(..) function. This is not really nice because you do not technically want to focus your drop down and there will be a side effect of a focus rectangle drawn around your UL.

    2. Register an onclick handler on the document that will hide any visible menu.

    • 0