我在 CSS3 中创建了一个 3 级下拉菜单,其中子菜单垂直下拉。一切都很好,唯一的问题是当菜单(.main-menu > li
-> 见下面的代码)太靠近屏幕的右侧时,它的子菜单的某些部分会随着它“滑出”屏幕而消失并变成无形的。
如果它太靠近屏幕的一侧,我想通过改变当前子菜单的浮动方向来改进一些 jQuery 菜单。由于我是 jQuery 的新手,你能帮我一点吗?
HTML的主要结构是:
<nav>
<ul class="main-menu">
<li><a href="#">Menu Point 1</a>
<ul>
<li><a href="#">Menu Point 1.1</a>
<ul>
<li><a href="#">Menu Point 1.1.1</a></li>
<li><a href="#">Menu Point 1.1.2</a></li>
....
</ul>
</li>
<li><a href="#">Menu Point 1.2</a></li>
....
</ul>
</li>
<li><a href="#">Menu Point 2</a>
<ul>
<li><a href="#">Menu Point 2.1</a>
<ul>
<li><a href="#">Menu Point 2.1.1</a></li>
<li><a href="#">Menu Point 2.1.2</a></li>
....
</ul>
</li>
<li><a href="#">Menu Point 2.2</a></li>
....
</ul>
</li>
.....
</ul>
</nav>
据我所见,jQuery 应该做这些事情:
测量一级子菜单+二级子菜单的宽度(x)
测量
.main-menu > li
屏幕左侧位置和右侧位置之间的距离 (y)if (y-x)<0 { float the submenus to the left (by default they float to the right); }
你有什么建议我应该如何开始?