在侧边栏外显示具有滚动但仍与锚点位于同一位置的下拉菜单

问题描述 投票:0回答:2

就像facebook一样,当悬停在朋友的图像上时,它会在朋友的左侧边栏旁边显示下拉菜单,

我给出了下拉菜单位置绝对与应用程序本身(位置:相对),但问题是当向下滚动菜单出现在其锚标记下方时,我该如何解决?

这里是我所拥有的代码示例,我可以用纯css实现这个,还是需要JS?

.App {
 position: relative;
}
nav {
 overflow: auto;
 max-height: 700vh;
}
.dropMenu {
 position: absolute;
}
<div className="App">
 <nav>
  <ul>
   <li>
    <a onClick={this.showDropMenu}> ... </a>
   </li>
   <div className="dropMenu"></div>
  </ul>
 </nav>
</div>
javascript html css reactjs html5
2个回答
0
投票

这是只使用CSS的最简单方法。如果您想拥有一个功能齐全的下拉菜单,则可能必须实施其他行为。

$(".nav li").on("mousemove", evt => {
  const li = $(evt.target);
  const dropdown = $(evt.target).find('.dropdown-menu');
  let liTop = li.offset().top;
  liTop = liTop < 0 ? liTop * -1 : liTop;
  dropdown.css('top', liTop + li.height());
})         
ul {
  list-style: none;
  overflow-y: auto;
  height: 100px;
  width: 400px;
}
ul li {
  margin: 20px 0;
}
ul li:hover .dropdown-menu {
  display: block;
}
ul li .dropdown-menu {
  position: absolute;
  display: none;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
  <li>
     <a href="">Lorem 1</a>
     <div class="dropdown-menu">
        Lorem 1 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 2</a>
     <div class="dropdown-menu">
        Lorem 2 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
    
  </li>
  <li>
     <a href="">Lorem 3</a>
     <div class="dropdown-menu">
        Lorem 3 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 4</a>
     <div class="dropdown-menu">
        Lorem 4 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
  <li>
     <a href="">Lorem 5</a>
     <div class="dropdown-menu">
        Lorem 5 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam exercitationem facilis neque quos laborum deleniti rem in distinctio cum atque recusandae earum architecto veniam maiores dolores, ad nihil molestiae excepturi.
    </div>
  </li>
</ul>

0
投票

使用position: sticky;

.App{
 position: sticky;
 }
nav {
 overflow: auto;
 max-height: 700vh;
}
.dropMenu {
 position: absolute;
}
© www.soinside.com 2019 - 2024. All rights reserved.