I am in the process of creating a recursive menu bar that contains multiple layers of ul li elements. The default behavior is for the menu to expand from left to right.
However, if the browser width is too small to accommodate the open menu items, they extend off the right side of the screen.
To address this issue, I want the direction of menu item expansion to switch from right to left when the browser width is insufficient.
Although I have attempted to implement this functionality using jQuery, the code is not functioning as intended.
The current issues are:
- If the browser width is smaller than the menu, the menu directions change but there are some bugs,
If the browser size is increased after shrinking, the menu width does not adjust back to 100% without refreshing the browser!
My JavaScript code snippet:
$(document).ready(function() {
$(".anamenu li").on('mouseenter mouseleave', function(e) {
e.preventDefault;
if ($('ul', this).length) {
var elm = $('ul:last', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docH = $(".disgovde").height();
var docW = $(".disgovde").width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
$("ul.anamenu li ul ul > li ul").css({
"left": "auto",
"right": "100%",
});
$("ul.anamenu li ul").css({
"left": "auto",
"right": "0",
});
$("ul.anamenu li > ul ul").css({
"left": "200px",
"right": "0",
});
$("ul.anamenu > li ul ul").css({
"left": "auto",
"right": "100%",
});
} else {
$("ul.anamenu li ul ul > li ul").css({
"left": "200px",
"right": "0",
});
}
}
});
});
CSS styling snippet:
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
a:hover {
text-decoration: none;
}
body {
height: 100vh;
/*
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: flex-start;
*/
}
[.....]