就像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>
这是只使用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>
使用position: sticky;
.App{
position: sticky;
}
nav {
overflow: auto;
max-height: 700vh;
}
.dropMenu {
position: absolute;
}