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?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>