/Rotating-Navigation-Animation

Primary LanguageHTML

Rotating-Navigation-Animation

This is apart of the 50 projects in 50 days challenge and is the third project.

Table of contents

Overview

The challenge

  • To create rotative navigation bar that rotates the page, once clicked. The challenge involves HTML, CSS and Javascript.

Screenshot

Mobile Preview

screenshot

Mobile Preview - active

screenshot

Desktop Preview

screenshot

Desktop Preview - active

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Plain CSS
  • Vanilla Javascript
  • Flexbox

What I learned

I learned more about the navigation bar and the transform property within the CSS.

Javascript - close and open navbar:

open.addEventListener("click", () => {
    container.classList.add("show-nav");
})

close.addEventListener("click", () => {
    container.classList.remove("show-nav");
})

Continued development

For future developments, I should learn more concepts of javascript and implement those within new projects.

Author