Git Product home page Git Product logo

nav_component's Introduction

NavMenu using Web Components

Functionality:

  • A list of links that opens and closes when you press a menu
  • The link URLs can be defined in the provided HTML slots
  • The button used to open/close the menu is itself a component

Using:

  • node
  • webpack
  • css/sass loaders

nav_component's People

Contributors

fshenton avatar

nav_component's Issues

Integrate NavMenu and MenuButton

  • Event triggered by MenuButton responded to by NavMenu
    • MenuButton dispatches custom event on click
    • NavMenu has event listener for custom event
    • When NavMenu hears the event, it toggles menu open state and shows/hides menu list

Create NavMenu component

  • set up basic component structure
    • template.js (exports template)
    • element.js (imports template and defines classes, which is exported)
    • index.js (exports component from element.js)
  • define element in index.js (src) (imports from index.js)
  • create template
    • uses aria-open if available
    • contains ul
    • ul contains lis
    • lis contain a slots that can be defined in index.html
  • construct the NavManu
    • create shadow dom
    • allow the NavMenu to toggle between open and closed (event listeners and state changes)
    • ensure a slots are being populated

Create MenuButton component

  • copy over existing component code
  • refactor and update
  • define it in index.js
  • add it to HTML
  • must be able to change state + trigger event (open/closed)
  • change label to close when open

Style the nav menu

  • Center aligned to page
  • Text-decoration
  • Li + a elements
  • Animation for open/closed

Set up main file structure

  • copy file structure from other web component project
  • update any copied files to contain references to the new project

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.