我正在构建一个递归菜单栏。它具有多个ul li ul li ul li。 菜单元素的打开位置从左到右。
但是如果浏览器宽度很小，那么我打开的菜单项；然后菜单项将移出右侧屏幕。
我希望浏览器的宽度小于我打开的菜单项，然后菜单项的打开方向从右向左更改。
我尝试构建jQuery代码，但无法正常工作。
我的问题是：
$(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",
});
}
}
});
});
<!-- begin snippet: js hide: false console: true babel: false -->*,
*::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;
*/
}
.disgovde {
width: 100%;
}
.icgovde {
max-width: 1110px;
width: 100%;
margin: 0 auto;
padding-left: 5px;
padding-right: 5px;
}
.ustmenu {
height: 155px;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
-webkit-flex-direction: row;
}
.ustmenu ol, .ustmenu ul {
list-style: none;
}
.ustlogo img {
/*width: 100%;*/
/*margin-top: 50px;*/
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.ustlogo img:hover {
/*width: 100%;*/
/*margin-top: 50px;*/
opacity: .5;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.ustsag {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.menu {
/*height: 45px;*/
display: flex;
display: -webkit-flex;
align-items: center;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: flex-end;
margin-top: 15px;
background: #fff;
}
ul.anamenu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
height: 35px;
}
ul.anamenu > li {
/*padding: 10px;*/
float: left;
height: 45px;
position: relative;
z-index: 2;
width: max-content;
}
ul.anamenu > li > a {
display: block;
font-family: manualeregular;
font-size: 15px;
color: #0099cc;
padding: 0 15px;
line-height: 35px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
ul.anamenu > li:hover > a {
background-color: #0099cc;
color: #fff;
border-radius: 6px 6px 0 0;
}
ul.anamenu ul {
background: #0099cc;
width: 200px;
position: absolute;
top: 35px;
left: 0;
right: 100%;
opacity: 0;
transition: 250ms all;
-webkit-transition: 250ms all;
-moz-transition: 250ms all;
-ms-transition: 250ms all;
-o-transition: 250ms all;
visibility: hidden;
}
ul.anamenu ul li {
position: relative;
border-bottom: 1px solid #ededed40;
}
ul.anamenu ul li:last-child {
border-bottom: none;
}
ul.anamenu ul li a {
display: block;
padding: 12px 12px;
font-size: 15px;
color: #fff;
font-family: manualeregular;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
ul.anamenu > li ul ul {
top: 0;
left: 180px;
background: #0099cc;
}
/*
ul.anamenu > li ul:last-child ul ul {
left: auto;
right: 100%;
}
*/
ul.anamenu > li:hover > ul {
opacity: 1;
visibility: visible;
top: 35px;
}
ul.anamenu ul li:hover > ul {
visibility: visible;
opacity: 1;
left: 200px;
z-index: 1;
}
ul.anamenu ul li ul li:hover {
background-color: #ededed;
}
ul.anamenu ul li:hover {
background-color: #ededed;
}
ul.anamenu ul li > ul li:hover > a {
color: #0099cc;
}
ul.anamenu ul li:hover > a {
color: #0099cc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disgovde">
<div class="icgovde">
<div class="ustmenu">
<div class="ustsag">
<div class="menu" style="display: flex;">
<ul class="anamenu">
<li><a href="index.php">ANASAYFA</a></li>
<li><a href="hakkimizda/hakkimizda-1">HAKKIMIZDA</a></li>
<li><a href="kategori/urunlerimiz"><span class="asagiok"></span>ÜRÜNLERİMİZ</a>
<ul class="altmenu">
<li><a href="kategori/genel-celik"><span class="sagok"></span>Genel Çelik</a>
<ul class="altmenu">
<li><a href="kategori/imalat-celigi"><span class="sagok"></span>İmalat Çeliği</a>
<ul class="altmenu" style="left: 200px; right: 0px;">
<li><a href="detay/1040">1040</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="hizmetler/hizmetler">HİZMETLER</a></li>
<li><a href="referanslar/bayilikler">BAYİLİKLER</a></li>
<li><a href="galeri/galeri">GALERİ</a></li>
<li><a href="iletisim/iletisim">İLETİŞİM</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cizgi"></div>
</div>