Send your first script to the browser

本頁內容尚未翻譯。

Let’s add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity!

準備好……

Create a hamburger menu component
Write a <script> to allow your site visitors to open and close the navigation menu
Move your JavaScript to its .js file

Build a Hamburger component

Create a <Hamburger /> component to open and close your mobile menu.

Create a file named Hamburger.astro in src/components/
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 global.css later.)
src/components/Hamburger.astro
```
---
---
<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```

Place this new <Hamburger /> component just before your <Navigation /> component in Header.astro.

Show me the code!

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburger />
    <Navigation />
  </nav>
</header>

Add the following styles for your Hamburger component:

/* nav styles */
.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover, a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

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.

Adding a <script> tag provides client-side JavaScript to “listen” for a user event and then respond accordingly.

Add the following <script> tag to index.astro, just before the closing </body> tag.
src/pages/index.astro
```
  <Footer />
  <script>
    document.querySelector('.hamburger')?.addEventListener('click', () => {
      document.querySelector('.nav-links')?.classList.toggle('expanded');
    });
  </script>
</body>
```
">

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 `.js` file

Instead of writing your JavaScript directly on each page, you can move the contents of your <script> tag into its own .js file in your project.

Create src/scripts/menu.js (you will have to create a new /scripts/ folder) and move your JavaScript into it.

document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('expanded');
});

Replace the contents of the <script> tag on index.astro with the following file import:
src/pages/index.astro
```
  <Footer />
  <script>
    document.querySelector('.hamburger')?.addEventListener('click', () => {
      document.querySelector('.nav-links')?.classList.toggle('expanded');
    });

    import "../scripts/menu.js";
  </script>
</body>
```
">

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, about.astro and blog.astro and verify that you have a responsive, interactive header on each page.

  <Footer />
  <script>
    import "../scripts/menu.js";
  </script>
</body>

Test your knowledge

When does Astro run any JavaScript written in a component’s frontmatter?
1. Astro never runs JavaScript
2. at build-time
3. When a visitor clicks a button
Optionally, Astro can send JavaScript to the browser to allow:
1. users to click page links
2. faster load times
3. client-side interactivity
The client-side JavaScript will be sent to a user’s browser when it is written or imported:
1. in <script> tags
2. between a .astro file’s code fences
3. in global.css

Checklist

I can add client-side interactivity with JavaScript in a <script> tag.
I can import a .js file into a <script> tag.

Resources

Client-side scripts in Astro