HTML reset copy

<div id="netsidebar" class="netbar"> <a href="javascript:void(0)" class="closenet" onclick="closeNav()">x</a> <a href="#">Page#1</a> <a href="#">Page#2</a> <a href="#">Page#3</a> <a href="#">Page#4</a> </div> <button class="opennet" onclick="openNav()">Sidebar panel <font color="red">☰</font></button>

CSS reset copy

.netbar { width: 0; position: fixed; z-index: 1; height: 250px; top: 0; left: 0; background-color: #0d0d0d; overflow-x: hidden; transition: 0.5s; padding-top: 60px; border-radius: 0px; border-top: 4px solid #960018; border-bottom: 4px solid #960018; } .netbar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #ccc; display: block; transition: 0.3s; border: 1px solid #222; } .netbar a:hover { color: #555; } .netbar .closenet { position: absolute; top: 0; right: 25px; font-size: 36px; color: red; border: 0px solid #222; } .opennet{ font-size: 20px; cursor: pointer; background-color: #18191b; color: #fff; padding: 10px 15px; border: none; border-radius: 4px; } .opennet:hover { background-color:gray; color: #000; }

Js JAVASCRIPT reset copy

function openNav() { document.getElementById("netsidebar").style.width = "250px"; } function closeNav() { document.getElementById("netsidebar").style.width = "0"; }