css - 根据屏幕上的可用空间更改下拉方向
问题描述
我的下拉菜单有问题sub-menus。我的标题上有一个简单的下拉菜单，但是它离窗口边框太近了。
所以sub-menu打开窗口边框到右侧，用户看不到它的内容。你能帮我解决这个问题吗？
我知道我需要对宽度进行一些计算或计算可用空间的像素，如果它小于sub-menu宽度，则在右侧打开它。但我不知道如何执行它。
<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) {
userLinksList.addEventListener("mouseover", function (evt) {
var options = {
url: "/api/userlinks",
method: "GET",
successCallback: onloadUserLinks
};
function onloadUserLinks(result) {
if (!window.__RAPMD__) {
window.__RAPMD__ = {};
}
window.__RAPMD__.lastUserLinks = result;
createMenuList(result.RecentLinks, recentlyItemListEl, "No recently visited pages");
createMenuList(result.Favorites, favoriteItemListEl, "No favorite pages");
}
if (!window.__RAPMD__ || !window.__RAPMD__.lastUserLinks) {
ajax(options);
}
});
userLinksList.addEventListener("mouseleave", function (evt) {
if (!window.__RAPMD__) {
return;
}
window.__RAPMD__.lastUserLinks = null;
});
}
}
function createMenuList(items, menuItemEl, emptyListTitle) {
if (!menuItemEl) {
return;
}
var df = document.createDocumentFragment();
(items.length ? items : [{ Title: emptyListTitle }]).forEach(function (item) {
var li = document.createElement("li"),
a = document.createElement("a");
if (item.Url) {
a.href = item.Url;
} else {
a.classList.add("empty-link-item");
}
a.innerHTML = item.Title;
li.appendChild(a);
df.appendChild(li);
});
menuItemEl.textContent = "";
menuItemEl.appendChild(df);
}
function ajax(options) {
var url = options.url,
method = options.method,
successCallback = options.successCallback,
failureCallback = options.failureCallback,
xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status === 200 && successCallback) {
var response = JSON.parse(xhr.responseText);
successCallback(response);
} else if (failureCallback) {
failureCallback();
}
};
xhr.send();
}
})();
</script>.sub-menu
background-color: header-sub-menu-background-color;
color: header-sub-menu-color;
display: flex;
justify-content: flex-end;
height: header-sub-menu-height;
padding-right: page-side-padding;
span
margin: 10px 0;
display: inline-block;
cursor: pointer;
ul
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-family: font-default-content;
font-size: font-size-ssm;
font-weight: bold;
text-transform: uppercase;
padding: 0;
li
& + li
margin-left: 30px;
a
cursor: pointer;
ul
& > li:hover
& > a,
& > span
color: header-menu-active-color;
> .arrow-right:after
border-left-color: header-menu-active-color;
> .sub-menu-list
shown()
> .sub-menu-list-right
showImmediately()
li
.arrow-right
cursor: default;
&:after
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid gray-color-3;
display: inline-block;
vertical-align: middle;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
a:hover, span:hover
color: header-menu-active-color;
.main-menu-list li
position: relative;
.sub-menu-list, .sub-menu-list-right
hidden()
display: inline-block;
list-style: none;
position: absolute;
background-color: black-color-1;
top: 31px;
left: -15px;
z-index: $main-menu-sub-menu-list-zindex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
li
position: relative;
white-space:nowrap;
margin-left: 0;
:hover > .sub-menu-list-right
shown()
a
width: 100%;
font-family: font-default-content;
font-size: 10px;
font-weight: 700;
padding: 10px 32px 10px 15px;
display: inline-block;
&:hover
color: header-menu-active-color;
p:hover
color: header-menu-active-color;
.sub-menu-list
min-width: 100%;
hideWithDelay()
a
text-decoration: none;
display: inline-block;
color: gray-color-3;
.active
color: header-menu-active-color;
.sub-menu-list-right
top: 0;
left: 100%;
&:hover
.sub-menu-list
shown()
&:hover
shown()
.sub-menu-list-right
&:hover
shown()
span
background-color: black-color-1
.main-menu-list
li:first-child:nth-last-child(2)
li:first-child:nth-last-child(3)
.sub-menu-list-right
left: auto;
right: 100%;<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" href="/UserManagement/NewUsers?fromMenu=True">New
users</a>
</li>
<li>
<a class="header-sub-menu-item" href="/UserManagement/ExistingUsers?fromMenu=True">Users
management</a>
</li>
<li>
<a class="header-sub-menu-item" href="/contacts-list?fromMenu=True">Contacts List</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Security</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/roles?fromMenu=True">Roles</a>
</li>
<li>
<a class="header-sub-menu-item" href="/roles-and-permissions?fromMenu=True">Roles and
Permissions</a>
</li>
<li>
<a class="header-sub-menu-item" href="/column-based-security?fromMenu=True">Column Based
Security</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Notifications Management</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item"
href="/email-notifications-management?fromMenu=True">Email Notifications</a>
</li>
<li>
<a class="header-sub-menu-item" href="/sent-email-notification?fromMenu=True">Sent Email
Notifications</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Source Data Analysis</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/automated-error-logging?fromMenu=True">Automated
Error Logging</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Technical Services</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/ddl-management?fromMenu=True">Dropdown Lists</a>
</li>
<li>
<a class="header-sub-menu-item" href="/unconventional-tags?fromMenu=True">Unconventional
Tags</a>
</li>
<li>
<a class="header-sub-menu-item"
href="/lcs-po-item-matching-duplicates?fromMenu=True">Tag Matching Duplicates</a>
</li>
<li>
<a class="header-sub-menu-item" href="/3-digit-code-register?fromMenu=True">3 Digit Code
Register</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>解决方案
推荐阅读
- azure - Azure Active Directory txt 记录未应用
- postgresql - Postgresql：数据库对象最大限制
- postgresql - 为什么数据库随机抛出dns错误
- c# - 在这种情况下 JsonConvert.DeserializeObject
实际上返回null？ - ios - 当屏幕进入睡眠状态时，AVAudioRecorder 会停止录制。有没有办法在屏幕锁定时继续录制？
- flask - ImportErrors 无法从 flask_app 导入 app 和 bcrypt 也无法从 models.py 导入 db
- pytorch - 局部二值模式变换
- java - Spring Boot Hazelcast SQL 谓词
- html - 当 BigCommerce 网站中的一件商品缺货时，为什么我会得到一条黑色的交叉线？
- java - 使用 LocalDate 值查询 Spring JPA LocalDateTime