html - 根据其屏幕位置，将子 相对于父 向左或向右定位

Question

我正在构建一个菜单结构，它将在鼠标悬停时打开一个子菜单。子菜单通常在菜单项的右侧打开。

我的问题出现在菜单位于屏幕右侧时，打开子菜单不会显示选项的完整文本，因为它会离开屏幕。

我需要一种方法来解决这个问题，方法是根据屏幕上的位置或子菜单的剩余空间选择在左侧或右侧打开。

代码如下:

<h1>
 Left Menu
</h1>
<div class='menu-container'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>

<h1>
 Right Menu
</h1>
<div class='menu-container menu-right'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>

CSS:

.menu-container { 
   display: inline-block;
   background-color: grey;
   width: 100px;
   height: 50px;
   text-align: center;
}

.menu-container li {
  list-style: none;
}

.menu-container ul {
  text-decoration: none;
  padding: 0px;
}

.option {
  display: inline-block;
  position: relative;
  background-color: white;
}

.submenu-container { 
   display: inline-block;
   position: absolute;
   background-color: red;
   white-space: nowrap;
   width: auto;
   height: auto;
   text-align: center;
   visibility: hidden;
}

.option:hover .submenu-container {
  visibility: visible;
}

.menu-right {
  float: right;
}

我设置了一个 fiddle case here.

PS:解决方案不应使用 JQuery，因为我在最终用例中使用 ReactJS。

Answer 1

我会定义一个 left和 right属性(property)取决于 parent 是否menu-container有 menu-right类(class)。然后你可以相应地对齐子菜单:

注释的 CSS:

.menu-container.menu-right .submenu-container{
  left: initial;
  right: 0;
}

.menu-container { 
   position:relative;
   display: inline-block;
   background-color: grey;
   width: 100px;
   height: 50px;
   text-align: center;
}

.menu-container li {
  list-style: none;
}

.menu-container ul {
  text-decoration: none;
  padding: 0px;
}

.option {
  display: inline-block;
  position: relative;
  background-color: white;
}

.submenu-container { 
   display: inline-block;
   position: absolute;
   left:0;
   background-color: red;
   white-space: nowrap;
   width: auto;
   height: auto;
   text-align: center;
   visibility: hidden;
}

.menu-container.menu-right .submenu-container{
  left: initial;
  right: 0;
}

.option:hover .submenu-container {
  visibility: visible;
}

.menu-right {
  float: right;
}

<h1>
 Left Menu
</h1>
<div class='menu-container'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>

<h1>
 Right Menu
</h1>
<div class='menu-container menu-right'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>