I'm new to programming and could really use your assistance.
I'm having a problem with the positioning of my drop down sub-menus. Specifically, I have a simple drop down in my header that is too close to the window border when certain permissions are applied.
As a result, the sub-menu opens beyond the window border on the right side, causing the content to be unseen by the user.
I'd like it to detect if there's enough space to open on the right side. If yes, then open on the right; if not, open on the left. Can you help me with this issue?
https://i.sstatic.net/moPKR.png
This is how it looks when there's enough space: https://i.sstatic.net/kr8Oj.png
Below is the HTML code:
<ul class="main-menu-list">
<li class="header-dropdown-item">
<span class="header-dropdown-item-title">Admin</span>
<img src="../Layout/images//arrow-down.svg" alt="">
<ul class="sub-menu-list">
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Users</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item">New
users</a>
</li>
...
<li>
<a class="header-sub-menu-item" >3 Digit Code
Register</a>
</li>
</ul>
</li>
... (HTML code continues)
And here's the CSS styling:
.sub-menu
...
Finally, here's the Pure JS code snippet:
<script type="text/javascript">
(function () {
handleMenuItems();
// functions:
function handleMenuItems() {
var menuEl = document.querySelector(".menu"),
userLinksList = menuEl && menuEl.querySelector(".user-links"),
recentlyItemListEl = menuEl && menuEl.querySelector(".recently-visited-item"),
favoriteItemListEl = menuEl && menuEl.querySelector(".favorites-item");
if (userLinksList) {
...
}
}
...
})();
</script>