Skip to content

Latest commit

 

History

History

dynamic-navbar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

How to use

Setup

  1. From index.html, copy <div id="dynamicNav"> (lines 45 to 57) into your <nav>
  2. Copy the styling from dynamicNav.css into your stylesheet
  3. Copy dynamicNav.js into your project
  4. From ids.js, copy lines 10, 21, and 26 into your ids.js

Adding sections

  1. Wrap each of your sections in <section> </section> tags
  2. Add the data-index="" attribute to each section you want to include in the navbar
  3. Add the section's title between the quotes
    • Ex: <section data-index="Section Title">

Notes

  • Any html tag with the data-index attribute will be added to the navbar—the tag doesn't have to be a <section>
  • More than 4 sections may require updates to the styling

Live Examples