我尝试了所有我知道的东西,但我的汉堡菜单图标只是不想向右走...有谁知道地球上有什么东西让它离开?
我也在使用Semantic UI。
这是我的代码:https://jsfiddle.net/657pxedq/5/
HTML:
<div id="navbar">
<div class="openbtn" onclick="openNav()"><i class="bars icon"></i></div>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
document.getElementById("dimmer").style.display = "block";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.getElementById("dimmer").style.display = "none";
}
</script>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
CSS:
.openbtn {
font-size: 20px;
cursor: pointer;
color: #744a84;
padding: 10px 15px;
border: none;
background-color: transparent;
right: 0;
justify-content: right;
float: right;
text-align: right;
}
#navbar {
position: fixed;
overflow: hidden;
background-color: transparent;
display: flex;
justify-content: right;
width: 100%;
z-index: 2;
text-align: right;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
(uggh,Stackoverflow希望我添加更多细节因为代码太多......但我不知道还有什么要说的)
提前致谢!
汉堡包菜单可以通过添加位置固定在右边:固定如下
.openbtn {
font-size: 20px;
cursor: pointer;
color: #744a84;
padding: 10px 15px;
border: none;
background-color: transparent;
right: 0;
justify-content: right;
position: fixed;
text-align: right;
}
更新了JSFiddle - https://jsfiddle.net/q2svn48p/