Necesito que funcionen las funciones de margen y ancho para poder proceder con el estilo. Quedo a la espera de sus amables respuestas, muchas gracias.
<nav class="navbar"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <i class="fas fa-bars"></i> </a> </span> </nav> <div id="slide-menu" class="side-nav"> <a href="#" class="btn-close" onclick="closeSlideMenu()">×</a> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">FAQ</a> <a href="#">Lgout</a> </div> <div id="main"> <h2>A responsive slide bar</h2> </div> <script> function openSlideMenu() { document.getElementById("slide-menu").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px;" } function closeSlideMenu() { document.getElementById("slide-menu").style.width = "0"; document.getElementById("main").marginLeft = "0"; } </script>Cambiar una etiqueta a una etiqueta de botón.
Aquí puede tomar el artículo cuándo usar qué etiqueta. https://medium.com/design-code-repository/a-vs-button-b859547cae4d
También puede mejorar su código agregando eventListner en lugar de 'onclick'.
function openSlideMenu() { document.getElementById('slide-menu').style.width = '250px'; document.getElementById('main').style.marginLeft = '250px;'; } function closeSlideMenu() { document.getElementById('slide-menu').style.width = '0'; document.getElementById('main').marginLeft = '0'; } const openSlideMenuBtn = document.getElementById('open-slide-menu-btn'); const closeSlideMenuBtn = document.getElementById('close-slide-menu-btn'); openSlideMenuBtn.addEventListener('click', openSlideMenu); closeSlideMenuBtn.addEventListener('click', closeSlideMenu); <nav class="navbar"> <span class="open-slide"> <button id="open-slide-menu-btn"> <i class="fas fa-bars"></i> </button> </span> </nav> <div id="slide-menu" class="side-nav"> <button class="btn-close" id="close-slide-menu-btn">×</button> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">FAQ</a> <a href="#">Lgout</a> </div> <div id="main"> <h2>A responsive slide bar</h2> </div>