将菜单与整个页面一起移动
将菜单与整个页面一起移动
提问于 2018-06-05 08:09:34
我想知道如何使菜单按钮固定在页面顶部。我需要它是可用的，无论何时页面滚动向下或向上。单击时，菜单应向下滑动。感谢每一位愿意回答的人，并为我糟糕的英语表达歉意。PS即使在这个平台上菜单不能很好地显示，但在我的网站上它工作得很好，只是停留在左上角，不会随着页面移动
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
});header {
width: 100%;
background: #ffffff;
height: 0px;
line-height: 0px;
border-bottom: 0px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #ffffff;
border: 0;
font-size: 2.0em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
padding: 5px 15px 0px 15px;
color: #ffffffff;
border: 0;
font-size: 4em;
line-height: 55px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: max(20%, max-content);
background: #666;
position: absolute;
text-align: center;
font-size: 10px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
}
.menu li:hover {
display: block;
background: #666;
padding: 15px 0 15px 0;
border-bottom: #666 10px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: #111;
text-align: center
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
text-align: center;
}
.menu a:hover {
text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 15px "Lato", sans-serif;
text-align: center
}
.glyphicon-home {
color: black;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}<header>
<button class="hamburger">☰</button>
<div class="menu">
<ul>
<li><button class="cross">˟</button></li>
<a href="#g1">
<li>Link 1</li>
</a>
<a href="#g2">
<li>link 2</li>
</a>
<a href="#g3">
<li>link 3</li>
</a>
<a href="#g3">
<li>link4</li>
</a>
</ul>
</div>
</header>
回答 2
Stack Overflow用户
发布于 2018-06-05 08:16:26
你需要确定它的位置。
position: fixed;Stack Overflow用户
发布于 2018-06-05 09:17:58
您的代码需要重新构建。你有很多不需要的代码。HTML结构不正确。
正如@eric提到的。你应该使用固定位置。
我对你的代码做了一些修改。请在以下位置查看：
header {
background: red;
height: 1000px;
}
.menu {
position: fixed;
top: 10px;
left: 10px;
z-index: 999999;
}
.menu button {
width: 100%;
border: none;
border-radius: 0;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
.menu button:hover {
background: #fff;
color: black;
}
.menu ul {
font-weight: bold;
font-size: 0.8em;
background: rgba(0,0,0,.5);
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.menu ul li a {
display: block;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: white;
text-decoration: none;
padding: 15px 5px;
}
.menu ul li a:hover {
background: white;
color: black;
text-decoration: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690352
复制相关文章
相似问题