我想知道如何在页面顶部修改菜单按钮。当页面向下或向上滚动时,我需要它可用。点击;菜单应该向下滑动。感谢所有愿意回答并抱歉我的英语不好的人。 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>
答案 0 :(得分:0)
您需要确定其位置。
position: fixed;
答案 1 :(得分:0)
您的代码需要重建。你有很多代码没有必要。 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;
}