定位左/右切换/触发器和下拉菜单的相应菜单

Question

我正在尝试定位下拉菜单的左右变体。

我的问题是切换（dropdown__toggle）我尝试正确定位，但它不起作用;我希望切换位于菜单三角形之上;

我使用一个位置：相对于它，如果我尝试位置：绝对它会造成混乱。

我希望切换和菜单没有固定宽度，因为我需要在多种情况下使用它。

.dropdown--right {
  position: relative; }
  .dropdown__toggle {
    display:inline-block;
    text-align:right;
    position:relative;
    right:0;
    cursor: pointer; }
  .dropdown__menu {
    background-color: #E3E3E3;
    background-clip: padding-box;
    border: 1px solid #BDBDBD;
    border-radius: 0.1875rem;
    color: #0b0b0b;
    list-style: none;
    margin: 4px 0 0 0; 
    min-width: 10rem;
    opacity: 1;
    padding: 0;
    right:0;
    position: absolute;
    pointer-events: none;
    text-align: left;
    top: 100%;
    z-index: 99; }
    .dropdown__menu__item {
      display: block;
      padding: 0.5rem 0.5rem;
      width: 100%;
      white-space: nowrap; }

.dropdown__menu:after {
    border-style: solid;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    width: 0; }

.dropdown__menu:after {
    border-style: solid;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    width: 0; }
  .c-dropdown--right-triangle .c-dropdown__menu:before {
    border-style: solid;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    right: 16px;
    border-width: 0 10px 10px 10px;
    border-color: #BDBDBD transparent; }
.dropdown__menu::after {
    border-style: solid;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    right: 18px;
    border-width: 0 8px 8px 8px;
    border-color: #E3E3E3 transparent; }

<div>
 <div class="dropdown--right" data-dropdown>
         <a class="dropdown__toggle" >Toggle</a>
        <ul class="dropdown__menu" data-dropdown-menu>
            <li class="dropdown__menu__item"><a>Cameras</a></li>
            <li class="dropdown__menu__item"><a>Cameras</a></li>
            <li class="dropdown__menu__item"><a>Cameras</a></li>
        </ul>
    </div>
 </div>

Answer 1

如果您希望课程dropdown--right也将dropdown__toggle中的文字与右侧对齐，我认为您只需要包含text-align。

.dropdown--right {
     position: relative;
     text-align: right;  <-- Added CSS
}

Answer 2

我添加了一些样式和课程，因此您可以使用dropdown--left或dropdown--right来选择下拉列表的显示：

/* COMMON STYLE */

.dropdown__toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.dropdown__menu {
  background-color: #E3E3E3;
  background-clip: padding-box;
  border: 1px solid #BDBDBD;
  border-radius: 0.1875rem;
  color: #0b0b0b;
  list-style: none;
  margin: 4px 0 0 0;
  min-width: 10rem;
  opacity: 1;
  padding: 0 0.5rem;
  position: absolute;
  pointer-events: none;
  top: 100%;
  z-index: 99;
}

.dropdown__menu__item {
  display: block;
  padding: 0.5rem 0;
  width: 100%;
  white-space: nowrap;
}

.dropdown__menu::after {
  border-style: solid;
  bottom: 100%;
  content: "";
  height: 0;
  position: absolute;
  width: 0;
  border-width: 0 8px 8px 8px;
  border-color: #E3E3E3 transparent;
}


/* LEFT STYLE */

.dropdown--left {
  position: relative;
  text-align: left;
}

.dropdown--left .dropdown__menu {
  left: 0;
  text-align: right;
}

.dropdown--left .dropdown__menu::after {
  left: 18px;
}


/* RIGHT STYLE */

.dropdown--right {
  position: relative;
  text-align: right;
}

.dropdown--right .dropdown__menu {
  right: 0;
  text-align: left;
}

.dropdown--right .dropdown__menu::after {
  right: 18px;
}

<div>
  <div class="dropdown--left" data-dropdown>
    <a class="dropdown__toggle">Toggle</a>
    <ul class="dropdown__menu" data-dropdown-menu>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
    </ul>
  </div>
</div>

<br><br>

<div>
  <div class="dropdown--right" data-dropdown>
    <a class="dropdown__toggle">Toggle</a>
    <ul class="dropdown__menu" data-dropdown-menu>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
      <li class="dropdown__menu__item"><a>Cameras</a></li>
    </ul>
  </div>
</div>

希望它有所帮助。

Answer 3

由于您将在多个情境/组件中使用此下拉菜单，我认为这就像向position: absolute;元素添加right: 0;和.dropdown--right一样简单，因为您'无论如何，我将在其他html元素中使用它。然后，对于此组件的左侧版本，只需将right: 0;替换为left: 0;

即可

<div class="dropdown__containerexample">
  <div class="dropdown--right" data-dropdown>
     <a class="dropdown__toggle" >Toggle</a>
     <ul class="dropdown__menu" data-dropdown-menu>
        <li class="dropdown__menu__item"><a>Cameras</a></li>
        <li class="dropdown__menu__item"><a>Cameras</a></li>
        <li class="dropdown__menu__item"><a>Cameras</a></li>
     </ul>
  </div>
</div>


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  .dropdown__containerexample {
     position: relative;
     width: 50%;
     height: 200px;
     border: 1px solid #000; } 
  .dropdown--right {
    position: absolute; 
    right: 0; }
  .dropdown__toggle {
    cursor: pointer; }
  .dropdown__menu {
    background-color: #E3E3E3;
    background-clip: padding-box;
    border: 1px solid #BDBDBD;
    border-radius: 0.1875rem;
    color: #0b0b0b;
    list-style: none;
    margin: 4px 0 0 0; 
    min-width: 10rem;
    opacity: 1;
    padding: 0;
    right:0;
    position: absolute;
    pointer-events: none;
    text-align: left;
    top: 100%;
    z-index: 99; }
    .dropdown__menu__item {
      display: block;
      padding: 0.5rem 0.5rem;
      width: 100%;
      white-space: nowrap; }
.dropdown__menu::after {
    border-style: solid;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    right: 18px;
    border-width: 0 8px 8px 8px;
    border-color: #E3E3E3 transparent; }