CSS Inline JS Меню OnClick

Question

У меня есть этот HTML:

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

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"; 
    } 
} 

CSS:

.info ul.submenu 
{ 
border: solid 1px #000; 
border-top: none; 
background-color: #fff; 
position: relative; 
top: 4px; 
width: 150px; 
padding: 6px 0px 0px 0px; 
z-index: 2; 
display: none; 
} 

.info ul.submenu li 
{ 
display: block; 
border: none; 
border-top: solid 1px #00ff00; 
} 

.info ul.submenu li a 
{ 
display: block; 
padding: 6px 0px 6px 4px; 
color: #ff0000; 
} 

.info ul.submenu li a:hover 
{ 
background: #0000ff; 
} 

Вот как я хочу, чтобы он выглядел при нажатиипо первой ссылке:

---------------------------------------------------------------------
Text Boom A [Link] | More Text [Another Link] | more text
---------------------------------------------------------------------
Stuff that i| A1              |iv is still shown. Text that is
underneath t| A2 This is Long |own. Text that is underneath the div 
is still sho| A3              |

Этот вид работает сейчас, за исключением того, что всплывающее окно A1, A2, A3 всегда выровнено по левому краю внизу.Как мне исправить мой CSS и / или HTML для достижения этого эффекта?

Answer 1

Вам придется вручную установить стиль left для элемента ul.

В 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";
    }
}

Тогда HTML будет:

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

Вы должны передать элемент «reference», чтобы вы знали, где разместить элемент.

Кроме того, чтобы это работало, измените position:relative; на position:absolute; в вашем CSS.