Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you!
Here is the code snippet:
HTML
<button class="menu-trigger btn-1">1</button>
<ul class="menu">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="menu-trigger btn-2">2</button>
<ul class="menu">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="menu-trigger btn-3">3</button>
<ul class="menu">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
CSS
.menu-trigger{
padding: 10px 25px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
background: transparent;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
color: lightgray;
}
.menu{
display: none;
}
.menu.open{
display:block;
}
.btn-1 {
border: 2px solid yellow;
}
.btn-1:hover {
background: #000;
color: #fff;
}
JS
$(function () {
$(".menu-trigger").click(function () {
$(this).next(".menu").toggleClass("open"); // Selects only the next one!
$(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
return false;
});
});