导航栏菜单位置和悬停
Nav bar menu position and hover
我目前有一些困难让我的弹出式导航栏菜单停留在按钮上方的位置。例如,当您更改浏览器窗口的大小时,您将看到按钮和菜单之间的距离增加或减少。好像菜单在往上移。
另一个问题是,当我在按钮上方的<div class="menu">
周围徘徊时,菜单弹出这是一个问题,我试图将此功能仅保留在按钮内(不在上面)。
这是我的工作。希望你能帮忙,非常感谢。
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
text-align: center;
text-decoration: none;
position: absolute;
right: -1%;
bottom: -16%;
font-family: 'Source Sans Pro', sans-serif;
}
.menu a {
display: block;
color: white;
text-align: center;
padding: 8px 13px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
opacity: 8;
position:sticky;
}
.menu a:hover {
background-color: #732878;
}
.menu > ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a>
</div>
<div class="menu">
<ul>
<li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
<li><a href="/games"onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
</ul>
</div>
</div>
问题是你的菜单是绝对定位的,并且有一个百分比值。随着窗口大小的变化,百分比值也随之变化。如果您想在这种情况下使用绝对位置,请为bottom设置一个绝对值。
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: 0;
bottom: 0;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
text-align: center;
text-decoration: none;
position: absolute;
right: 0;
bottom: -61px;
font-family: 'Source Sans Pro', sans-serif;
}
.menu a {
display: block;
color: white;
text-align: center;
padding: 8px 13px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
opacity: 8;
position:sticky;
}
.menu a:hover {
background-color: #732878;
}
.menu > ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a>
</div>
<div class="menu">
<ul>
<li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
<li><a href="/games"onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
</ul>
</div>
</div>
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 如何在鼠标悬停时将对象从起始位置移动到结束位置,然后在鼠标悬停后再次移动
- highcharts:更改工具提示和阴影(悬停)的标准位置
- 使用 Javascript 悬停将 Div 复制到页面上的其他位置
- 如何将图像链接与 HTML 和 CSS 一起使用时,悬停时在其他位置显示图像
- 使特定元素在悬停时更改位置
- 当下一个元素处于相对位置时,将鼠标悬停在浮点元素上不会触发
- 离开悬停后如何将P标签保持在上一个位置
- 更改悬停 HTML/CSS 后出现的背景图像的位置
- 在鼠标悬停时更改顶点位置
- D3.js :仅当指针在同一位置停留最短时间时,才启动鼠标悬停事件
- 如何在鼠标悬停和鼠标出出时增加选择元素的大小时固定表格的位置
- 悬停时对背景位置进行动画处理
- 如何在悬停时指定图像的位置
- 悬停时的背景位置动画
- 日期选择器隐藏在鼠标悬停位置
- Javascript/CSS幻灯片背景在悬停时返回到选定位置
- 鼠标悬停时,会在不同的位置显示Flash动画
- 滚动网页与鼠标的位置-悬停在侧面元素
- 获取鼠标光标在谷歌地图V3 API标记鼠标悬停位置