I need the margin and width functions to work so i can proceed to the styling. I await your kind rsponses, thank you very much.
<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>
Change a tag to button tag.
Here You can grab article when to use which tag. https://medium.com/design-code-repository/a-vs-button-b859547cae4d
Also You can improve Your code by adding eventListner rather than '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>