CODEWITHSUNDEEP
javascript
Arsen
Arsen

Reputation: 317

How to supplement the script so that the menu is hidden by a click outside it?

Now the menus are opened and hidden by clicking on the link. 

function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function overlay(curobj, subobjstr, opt_position) {
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"

var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
a {font: normal 12px arial; margin: 0 20px 0 0;}
a:hover {text-decoration: none;}
.menu {position: absolute; display: none; background: cornsilk; padding: 4px; margin: 2px 0; border: 1px solid silver; font: normal 11px arial;}
<a href="#" onClick="return overlay(this, 'menu1', 'leftbottom')">link1</a>
<a href="#" onClick="return overlay(this, 'menu2', 'leftbottom')">link2</a>
<a href="#" onClick="return overlay(this, 'menu3', 'rightbottom')">link3</a>

<div id="menu1" class="menu">menu1</div>
<div id="menu2" class="menu">menu2</div>
<div id="menu3" class="menu">menu3</div>

jsfiddle example

How to additionally hide the menu by clicking outside it? Thank you.

Upvotes: 0

Views: 62

Answers (1)

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

The changes needed are these -:

  • We need to add code to hide menu whenever user clicks outside...
document.addEventListener("click", () => {
    if(document.getElementById("menu1").style.display === "block"){
      document.getElementById("menu1").style.display = "none";
    }
    if(document.getElementById("menu2").style.display === "block"){
        document.getElementById("menu2").style.display = "none";
    }
    if(document.getElementById("menu3").style.display === "block"){
        document.getElementById("menu3").style.display = "none";
    }
})
  • Add code to block event bubbling whenever a link is clicked because we need to show the menu on link click, for that we just need to pass event into overlay function and add event.stopPropagation()...
function overlay(e, curobj, subobjstr, opt_position) {
    e.stopPropagation();
    if (document.getElementById){
        var subobj=document.getElementById(subobjstr)
        subobj.style.display=(subobj.style.display!="block")? "block" : "none"

... rest of the function will be same...

  • Pass event from HTML to overlay function ...
<a href="#" onClick="overlay(event, this, 'menu1', 'leftbottom')">link1</a>
<a href="#" onClick="return overlay(event, this, 'menu2', 'leftbottom')">link2</a>
<a href="#" onClick="return overlay(event, this, 'menu3', 'rightbottom')">link3</a>

Here is the working demo -: https://jsfiddle.net/bhza0tLx/12/

Hope it helps....

Upvotes: 1

Related Questions