CSS overflow erzeugen
Ich habe eine Menü-Sidebar, welche ich rechts positioniert habe.
Ich möchte nun neben dem Link Seitenleiste schließen ein Icon anzeigen, welches aus der Sidebar herausragt.
Hat jemand Tipps, wie ich das am besten umsetzen kann?
Der hier verwendete Code
<style>
body{
background:#023456;
overflow:hidden;
}
div{
position:absolute;
top:10px;
right:10px;
background:#635e37;
color:black;
width:150px;
height:100%;
border-radius:16px;
transition:2s all;
}
a{
background:#635e37;
display:inline-block;
padding:5px;
color:white;
border-radius:13px;
line-height:3;
margin:20px 0px 0px -70px;
font-size:20px;
}
a:before{
background:#635e37;
display:inline-block;
content:'| | |';
margin-left:20px;
margin-right:70px;
font-weight:900;
transform:rotate(90deg);
cursor:pointer;
}
li{
color:white;
}
.rein{
right:-150px;
transition:2s all;
}
</style>
<div>
<a id="closeSidebar" href="#">Close</a>
<nav>
<ul>
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
</ul>
</nav>
</div>
<script>
document.getElementsByTagName('a')[0].addEventListener('click',function(){
document.getElementsByTagName('div')[0].classList.toggle('rein');
});
</script>