Variabili
Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 21 di 27.
In questa sfida, realizzeremo un menu di navigazione laterale comprimibile. L’obiettivo è completare l’intero script e aggiungere anche una transizione CSS, così che il menu di navigazione si apra e si chiuda in modo fluido.
Sfida
Facile- Assegna al div del menu l'ID
sideNav. - Crea tre variabili nel tuo script:
- Una per memorizzare l'elemento di navigazione laterale (
sideNav) - Una per memorizzare il pulsante di apertura (
openBtn) - Una per memorizzare il pulsante di chiusura (
closeBtn)
Provalo tu
<!DOCTYPE html>
<html>
<head>
<title>Space Exploration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidenav">
<button id="closeBtn" class="close-btn">×</button>
<a href="#apollo">Apollo Missions</a>
<a href="#iss">International Space Station</a>
<a href="#mars">Mars Rovers</a>
<a href="#jameswebb">James Webb Telescope</a>
</div>
<header>
<button id="openBtn" class="open-btn">☰ Menu</button>
<h1>Space Exploration</h1>
</header>
<main>
<section id="apollo">
<h2>Apollo Missions</h2>
<p>
The Apollo program, carried out by NASA in the 1960s and 1970s,
successfully landed humans on the Moon for the first time in 1969.
</p>
</section>
<section id="iss">
<h2>International Space Station</h2>
<p>
The ISS is a multinational research laboratory in low Earth orbit,
continuously inhabited since 2000 by astronauts and scientists.
</p>
</section>
<section id="mars">
<h2>Mars Rovers</h2>
<p>
Rovers like Spirit, Opportunity, Curiosity, and Perseverance
have been exploring the Martian surface, searching for signs of past life.
</p>
</section>
<section id="jameswebb">
<h2>James Webb Space Telescope</h2>
<p>
Launched in 2021, the James Webb Telescope is providing
breathtaking images of the universe and studying distant galaxies.
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di JavaScript in azione
Esercitati da solo: Playground Web