Javascript Blur

Question

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.

I have a ul that is set to display:inline using the onclick() JS event handler. How do I make the ul go back to display:none when I click any where else on the page other than the now visible ul?

I've Googled about blur and setting the focus to another element but I don't know how to actually do it.

I want to do this in straight Javascript, not jQuery.

Here is the html I use:

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

When the user clicks on one of the linked <a> tags, the <ul> which is hidden and directly below the <a> tag becomes visible. I want the <ul> element to dissapear when the user clicks anywhere but the <ul>.

Edit:

Here is my javascript:

function menu(id) {  
    var myLayer = document.getElementById(id);  
    if (myLayer.style.display == "none" || myLayer.style.display == "") {  
        myLayer.style.display = "block";  
    } else {  
        myLayer.style.display = "none";  
    }  
} 

Edit 2:

Complete CodE:

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

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

Answer 1

jQuery creates a blur event you can bind a function to, is there a strong reason not to use jQuery? Using a JavaScript library even if it is just for event handling, helps insulate you from browser differences. I've only ever used focus/blur events for text input or textarea elements in a form. It sounds like you want a list to float on top of the other elements. I'd position the list relatively and give it a z-index that is higher than the background. I'd bind a click event to the area outside the list, to dismiss the list pop-up. Is toggling a pop-up/modal window what you want? I'd have a look at jQuery SimpleModal for modal window examples, or look at how one is implemented if you want to roll your own.

Answer 2

This is quite simple actually.

Once you have a reference to the DOM element that you want to bind the blur event listener to, assign it like this:

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

Answer 3

If you are looking for a way to stop "onclick" event if it happens inside your menu then "event.stopPropagation();" may be what you need

<body onclick="menu('id1'); menu('id2');">
  <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" onclick="alert('click menu'); event.stopPropagation();">  
       <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" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div> 
</body>