Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript

Css Inline Js Menu Onclick

Post a Comment
I have this HTML:
Some Text Boom A Link | More text Another Link

Solution 1:

You will have to manually set the left style for the ul element.

In javascript:

functionmenu(eSrc, id) { 
    var myLayer = document.getElementById(id); 
    if (myLayer.style.display == "none" || myLayer.style.display == "") { 
        myLayer.style.display = "block";
        myLayer.style.left = eSrc.offsetLeft + "px";
        myLayer.style.top = (eSrc.offsetTop + eSrc.offsetHeight) + "px";
    } else {
        myLayer.style.display = "none";
    }
}

Then, the HTML would be:

<divclass="info"> 
    Some Text Boom A <aonclick="menu(this, 'id1');">Link</a> | More text
    <aonclick="menu(this, 'id2');">Another Link</a> | more text
    <ulid="id1"class="submenu"><li><ahref="dfhdfh">A1</a></li><li><ahref="aetjetjsd">A2 This is Long</a></li><li><ahref="etetueb">A3</a></li></ul><ulid="id2"class="submenu"><li><ahref="dfhdfh">B1</a></li><li><ahref="aetjetjsd">B2</a></li><li><ahref="etetueb">B3</a></li></ul></div>

You have to pass a "reference" element so that you know where to position the element.

Also, for this to work, change position:relative; to position:absolute; in your CSS.

You may like these posts

Post a Comment for "Css Inline Js Menu Onclick"