我创建了一个可悬停的侧边导航栏，它出现在右侧。我面临的问题是导航栏没有达到我想要的程度。我希望导航栏触及浏览器页面的一侧，直到导航栏只显示一点点。有人可以帮我解决这个问题吗？谢谢。
This is the link to W3S to show you where I got the code from
为了更具体地说明导航栏的位置，我圈出了我想要的位置:
这是我希望导航栏显示的方式:
这是悬停时的样子:
body{
margin:0;
font-family:'Montserrat';
}
.polymorph{
fill:#EDE1DB;
}
#showdashboard, #goback{
position:absolute;
margin: 80px auto 0 auto;
left:0;
right:0;
width:30%;
background:none;
border: 1px solid #163C68;
border-radius: 5px;
color:#163C68;
font-size: 20px;
cursor:pointer;
outline:0;
}
#gobutton{
width: auto;
margin: 30px auto;
background: #AAC0AA;
}
#blip{
position:fixed;
color:#298BE2;
right:25%;
top:0;
opacity: 0;
width: 30%;
transform: translateY(-800px);
}
#mySidenav a {
position: absolute;
right: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: #163C68;
border-radius: 5px 0 0 5px;
}
#mySidenav a:hover {
right: 0;
}
#about {
top: 20px;
background-color: #EDE1DB;
}
#blog {
top: 80px;
background-color: #EDE1DB;
}
#projects {
top: 140px;
background-color: #EDE1DB;
}
#contact {
top: 200px;
background-color: #EDE1DB
}<!DOCTYPE hmtl>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Meter Dashboard Animation">
<link rel="stylesheet" href="LandingPage.css">
</head>
<body>
<button id="showdashboard">Show Meter Dashboard</button>
<svg viewBox="0 0 237.5 104.8" >
<polygon class="polymorph" points="237.5,104.8 0,104.8 0,0 63.9,0 237.5,0"/>
</svg>
<div id="blip">
<div id="mySidenav" class="sidenav">
<a href="#" id="about">About</a>
<a href="#" id="blog">Blog</a>
<a href="#" id="projects">Projects</a>
<a href="#" id="contact">Contact</a>
</div>
<button id="goback">Back</button>
</div>
<script src="anime.min.js"></script>
<script>
var revealbtn = document.getElementById('showdashboard');
var backbtn = document.getElementById('goback');
revealbtn.onclick = function(){
var morphing = anime({
targets: '.polymorph',
points: [
{value:'237.5,104.8 0,104.8 0,0 63.9,0 33.9,63.6'},
{value:'237.5,104.8 0,104.8 0,0 0,0 33.9,63.6'}
],
easing: 'easeOutQuad',
duration: 800,
loop: false
});
anime({
targets: '#blip',
opacity: 1,
duration: 1000,
translateY: 250
})
var promise = morphing.finished.then(()=>{
backbtn.onclick = function(){
var morphing = anime({
targets: '.polymorph',
points:[
{value:'237.5,104.8 0,104.8 0,0 63.9,0 33.9,63.6'},
{value:'237.5,104.8 0,104.8 0,0 63.9,0 237.5,0'},
],
easing: 'easeOutQuad',
duration: 800,
loop: false
});
anime({
targets:'#blip',
opacity: 0,
duration: 1000,
translateY: -800
})
};
})
}
</script>
</body>
</html>最佳答案
它应该通过稍微改变 css 来工作。请看下面demo
更改了 CSS
#mySidenav a {
position: fixed;
right: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: transparent;
border-radius: 5px 0px 0px 5px;
}
#mySidenav a:hover {
right: 0;
color: white;
}
我已将颜色设置为透明，因此如果没有悬停它就会隐藏，并将位置从 left 更改为 right。
接下来将悬停状态颜色更改为白色以显示文本。
更新
我更改了边框半径，使其位于元素的左边缘。位置也更改为 fixed 以删除滚动条并使菜单始终位于该位置(即使是垂直滚动条)。
关于javascript - Navbar 更多在右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59698797/