I set up my navber using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed in a mobile viewport the navigation links are showing by default. Implimented a button that can be clicked to show and hide it but how can I use javascript to actually write the code for that to work? Here is a snippet of my code:
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" >
<div >
<img src="images/Logo.svg" alt="Logo" width="20">
<span >First Last</span>
</div>
<div >
<button >
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div >
<div >
<a href="#school" >About</a>
<a href="#skills" >Skills</a>
<a href="#projects" >Projects</a>
<a href="#experience" >Experience</a>
</div>
</div>
</nav>
Image of Navbar seen from the mobile view
CodePudding user response:
- Change
block md:flex
tohidden md:flex
which will hide the menu on mobile screens. - You can then use
Element.classList.toggle
to toggle thehidden
class when the button is clicked on mobile screens.
Try this
document.addEventListener('DOMContentLoaded', function(){
let menu = document.getElementById('navbar-menu');
document.getElementById('navbar-toggler').addEventListener('click', event => {
menu.classList.toggle('hidden')
})
})
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" >
<div >
<img src="images/Logo.svg" alt="Logo" width="20">
<span >First Last</span>
</div>
<div >
<button id="navbar-toggler">
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div id="navbar-menu">
<div >
<a href="#school" >About</a>
<a href="#skills" >Skills</a>
<a href="#projects" >Projects</a>
<a href="#experience" >Experience</a>
</div>
</div>
</nav>
CodePudding user response:
You can use Javascript to select the element by its id and add or remove classes/styles to achieve the toggle effect.
ex:
const navbar = document.querySelector("#navbar");
if (navbar.classList.contains("something"){
someelement.style.display = "none";
anotherElement.style.display = "block";
navbar.classList.add("someClass");
}
Here is an example codepen for the same. https://codepen.io/ljc-dev/pen/MWoRayy