Let’s add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!
Get ready to…
- Create a hamburger menu component
- Write a
<script>to allow your site visitors to open and close the navigation menu
Build a Hamburger componentSection titled Build a Hamburger component
<Hamburger /> component to open and close your mobile menu.
Create a file named
Copy the following code into your component. This will represent your 3-line “hamburger” menu to open and close your navigation links on mobile. (You will add the new CSS styles to
Place this new
<Hamburger />component just before your
<Navigation />component in
Show me the code!
- Add the following styles for your Hamburger component:
Write your first script tagSection titled Write your first script tag
Your header is not yet interactive because it can’t respond to user input, like clicking on the hamburger menu to show or hide the navigation links.
Add the following
index.astro, just before the closing
Check your browser preview again at various sizes, and verify that you have a working navigation menu that is both responsive to screen size and responds to user input on this page.
Importing a Section titled Importing a .js file
<script> tag into its own
.js file in your project.
src/scripts/menu.js(you will have to create a new
Replace the contents of the
index.astrowith the following file import:
Check your browser preview again at a smaller size and verify that the hamburger menu still opens and closes your navigation links.
Add the same
<script>with import to your other two pages,
blog.astroand verify that you have a responsive, interactive header on each page.
Test your knowledgeSection titled Test your knowledge