Miten luodaan: rullalauta-valikko
- Edellinen sivu Siirtymävalikko
- Seuraava sivu Kääntyvä sivupalkki
Opi, miten luodaan rullalauta-valikkona navigointi.
Napsauta alla olevaa painiketta nähdäksesi sen toiminnan:
Luo rullalauta-valikko
Vaihe 1 - Lisää HTML:
<!-- 覆盖层 --> <div id="myNav" class="overlay"> <!-- 关闭覆盖层导航的按钮 --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <!-- Overlay content --> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> • Käytä mitä tahansa elementtiä avataksesi/näyttääksesi peittävän kerroksen navigointivalikon; <span onclick="openNav()">open</span>
Toinen vaihe - Lisää CSS:
• Peittävä kerros (tausta); .overlay { • Korkeus ja leveys riippuvat siitä, miten haluat näyttää peittävän kerroksen (katso alla oleva JS); height: 100%; width: 0; position: fixed; • Pysy paikallaan; z-index: 1; • Aseta ylleen; left: 0; top: 0; background-color: rgb(0,0,0); • Musta vaihtoehto (varakäyttöväri); background-color: rgba(0,0,0, 0.9); • Läpinäkyvä musta; overflow-x: hidden; • Poista käytöstä horisontaalinen vieritys; transition: 0.5s; • 0.5 sekunnin siirtymäefekti, jotta peittävä kerros liukuu ylös tai alas (korkeus tai leveys riippuen näyttötavasta); } • Aseta sisältö peittävään kerrokseen; .overlay-content { position: relative; top: 25%; • 25% etäisyys ylälaidasta; width: 100%; • 100% leveys; text-align: center; • Keskitetty teksti/linkki; margin-top: 30px; • Yläkaistaleveys 30px, jotta ei tapahdu törmäystä suljettpainikkeen kanssa pienissä näytöissä; } • Peittävän kerroksen sisäiset navigointilinkit; .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; • Näytä blokkimainen eikä riviin; transition: 0.3s; • Hiiren osoitin päällä oleva siirtymäefekti (väri); } • Kun hiiren osoitin on navigointilinkin päällä, muuta sen väriä; .overlay a:hover, .overlay a:focus { color: #f1f1f1; } /* Sijoita sulkemispainike (ylórauna oikeassa yläkulmassa) */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } /* Kun näytön korkeus on alle 450 kuvapistettä, muuta linkkien fonttikokoa ja siirrä sulkemispainike uudelleen, jotta ne eivät päällekkääntyisi */ @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
Vaihe 3 - Lisää JavaScript:
Tässä esimerkissä, kun se aktivoituu, katsojen navigointivalikko lasketaan oikealta vasemmalle (leveys 0%:sta 100%:iin):
Liukuva sivulta sivulle
/* Kun käyttäjä napsauttaa <span>-elementtiä, avaa */ function openNav() { document.getElementById("myNav").style.width = "100%"; } /* Kun käyttäjä napsauttaa "x"-symbolia katsojen sisällä, sulje */ function closeNav() { document.getElementById("myNav").style.width = "0%"; }
Tässä esimerkissä katsojen navigointivalikko lasketaan ylös alaspäin (korkeus 0%:sta 100%:iin).
Huomioitavaa:Tässä esimerkissä huomaa, että CSS eroaa edellisestä esimerkistä hieman (oletuskorkeus on nyt 0, leveys 100%, ja yläpinnan ylitys
Varten piilotettu
(禁用垂直滚动,小屏幕除外)):
Lasketaan ylös alaspäin
/* 打开 */ function openNav() { document.getElementById("myNav").style.height = "100%"; } /* 关闭 */ function closeNav() { document.getElementById("myNav").style.height = "0%"; }
Tässä esimerkissä avataan navigointivalikko ilman animaatiota:
Avaa valikko ilman animaatiota
/* 打开 */ function openNav() { document.getElementById("myNav").style.display = "block"; } /* 关闭 */ function closeNav() { document.getElementById("myNav").style.display = "none"; }
Liittyvät sivut
Oppitunti:CSS navigointipalkki
- Edellinen sivu Siirtymävalikko
- Seuraava sivu Kääntyvä sivupalkki