右侧的导航栏更多
我已经创建了一个可悬停的侧导航栏，它出现在右侧。我面临的问题是导航栏没有达到我想要的程度。我希望导航栏接触到浏览器页面的一侧，直到只显示导航栏的一小部分。有人能帮我解决这个问题吗？谢谢。
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>
回答 2
Stack Overflow用户
发布于 2020-01-12 05:50:09
它应该通过稍微改变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，以移除滚动条并使菜单始终位于该位置(即使是垂直滚动条)。
Stack Overflow用户
发布于 2020-01-12 05:48:52
它应该像改变你的css一样简单。在html代码中，您将导航栏包装在名为"blip“的div中。这意味着当您设置以下内容时：
#blip{
position: absolute;
right: 25%;
}您正在使整个div从右侧开始是整个页面宽度的25%。只需将“right”的值设置为0，您就应该拥有您想要的东西了！
https://stackoverflow.com/questions/59698797
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号