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:

function menu(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:

<div class="info"> 
    Some Text Boom A <a onclick="menu(this, 'id1');">Link</a> | More text
    <a onclick="menu(this, '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>

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"