我正在用 CSS 构建一个菜单，并希望确保子菜单和子子菜单保留在屏幕上并且不会溢出。它用于响应式 html 布局，我想动态调整 CSS，以便在调整屏幕大小时，受修复影响的菜单项现在可能位于下一行和最左侧的重置...这是我试过的..(我的 css 和 javascript 很差)
HTML:
<body>
<div class="container">
<div id='cssmenu'>
<ul class='dropdown'>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
CSS:
body {
background:red;
}
.container {
margin:30px;
background:#fff;
padding-bottom:400px;
}
.dropdown, .dropdown li, .dropdown ul {
list-style:none;
margin:0;
padding:0;
}
.dropdown {
position:relative;
z-index:10000;
float:left;
width:100%;
}
.dropdown ul {
position:absolute;
top:100%;
visibility:hidden;
display:none;
z-index:900;
width:16em;
}
.dropdown ul ul {
top:0;
}
.dropdown li {
position:relative;
float:left;
}
.dropdown li:hover {
z-index:910;
}
.dropdown ul:hover, .dropdown li:hover > ul, .dropdown a:hover + ul, .dropdown a:focus + ul {
visibility:visible;
display:block;
}
.dropdown a {
display:block;
background:#000;
color:#fff;
padding:1em 2em;
}
.dropdown ul li {
width:100%;
}
.dropdown li:hover a {
background:#333;
}
.dropdown li a:focus, .dropdown li a:hover {
background:#666;
}
.dropdown .nonedge ul li ul li{
left:100%;
}
.dropdown .edge ul {
right:0px;
}
.dropdown .edge ul li ul {
left:-100%;
}
JAVASCRIPT
$(function () {
$(".dropdown li").on('mouseenter mouseleave', function (e) {
if ($('ul', this).length) {
var elm = $('ul:first', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docH = $(".container").height();
var docW = $(".container").width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
$(this).addClass('edge');
} else {
$(this).removeClass('edge');
}
}
});
});
$(function () {
$(".dropdown li").on('mouseenter mouseleave', function (e) {
if ($('ul', this).length) {
var elm = $('ul:first', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docH = $(".container").height();
var docW = $(".container").width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
$(this).removeClass('nonedge');
} else {
$(this).addClass('nonedge');
}
}
});
});
最佳答案
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
子菜单
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
关于javascript - 如何使用 javascript 为子菜单和溢出的子子菜单项动态调整 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35107779/