Geek Logbook

Tech sea log book

50projectsIn50days – Day 3: Rotating Navigation

A simple article written in plain HTML with has the flip change. If you click on the hamburger menu, the article will rotate 45 degrees. It’s a nice transformation that is created thanks to adding to a nav the “show-nav” CSS style. But that CSS selector “snow-nav” is not alone it’s added to a different part of the page. Because, the changes affect the navbar, the container of the article and the circle. So, the CSS that make the changes are the following: {
    transform: rotate(-20deg);
} .circle {
    transform: rotate(-70deg);
} + nav li {
    transform: translateX(0);
    transition-delay: 0.3s;

These selectors are used when the user clicks on the hamburger menu. When it happens, and event listener is the listener for the click event. When int happens for the first time it adds then we open the article, and with the second one we close it. As you can see in the following JavaScript code:

const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')

open.addEventListener('click', () => container.classList.add('show-nav'))
close.addEventListener('click', () => container.classList.remove('show-nav'))

You can see the code in this GitHub Repository: 03.rotating_navigation and the demo of the project is here: Rotating Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *.

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>