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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!