CSS horisontaalinen navigointipalkki

Horisontaalivalikko

On kaksi tapaa luoda horisontaalivalikko: käyttääSisäinentaiLiikkuvatLuettelokerros.

Sisäinen luettelokerros

Yksi tapa rakentaa horisontaalivalikko on määrittää <li>-elementti inline:ksi lisäksi edellisessä luvussa olevaan 'standardi' -koodiin:

Esimerkki

li {
  display: inline;
}

Kokeile itse

Esimerkki selityksestä:

display: inline; - Oletusarvoisesti <li>-elementti on blokki-elementti. Tässä poistamme jokaisen luettelokerroksen ennen ja jälkeen olevan rivinvaihdon, jotta ne näkyvät samassa rivissä.

Liikkuvat luettelokerrokset

Toinen tapa luoda horisontaalivalikko on käyttää float:ia <li>-elementtien kanssa ja määrittää navigointilinkkien asettelu:

Esimerkki

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Kokeile itse

Esimerkki selityksestä:

  • float: left; - Käytä float:ia siirtääksesi blokki-elementit toistensa viereen
  • display: block; - Näytä linkit blokki-elementteinä, jotta koko linkin alue on klikattavissa (ei pelkästään teksti), ja mahdollistaa täyttymisen (jos tarpeen, myös korkeuden, leveyden, marginaalin jne.)
  • padding: 8px; - Tee blokki-elementistä kaunis
  • background-color: #dddddd; - Lisää jokaiselle elementille harmaa taustaväri

Vinkki:Jos haluat täysileveydellisen taustavärin, lisää background-color <ul>-elementtiin eikä jokaiseen <a>-elementtiin:

Esimerkki

ul {
  background-color: #dddddd;
}

Kokeile itse

Horisontaalivalikon esimerkki

Luo perusvihreä taustavärisä tehostekäyttöiselle horisontaalivalikolle ja muuta linkin taustaväri, kun käyttäjä siirtää hiiren linkin yläpuolelle:

Esimerkki

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: valkoinen;
  text-align: center;
  text-align: center;
  padding: 14px 16px;
}
text-decoration: none;
/* Muuta linkin väri #111 (mustaksi) kun hiiri liikkuu yllä */
  li a:hover {
}

Kokeile itse

background-color: #111;

Aktiivinen/nykyinen navigointilinkki

Esimerkki

Lisää "active"-luokka nykyiselle linkille, jotta käyttäjä tietää, missä sivulla hän on:
  .active {
}

Kokeile itse

background-color: #4CAF50;

Oikea tasaus linkkejäOikea tasaus linkkejä, kiinnittämällä luettelojen kohteet oikealle liikkumaan (float:right;

Esimerkki

）：
  <ul>
  <li><a href="#home">Koti</a></li>
  <li><a href="#news">Uutiset</a></li>
  <li><a href="#contact">Yhteydenotto</a></li>
<li style="float:right"><a class="active" href="#about">Tietoa</a></li>

Kokeile itse

</ul>

Reunaviiva-erottimet Lisää border-right

Esimerkki

/* Lisää kaikille luettelojen kohtille harmaa oikea reunaviiva, lukuun ottamatta viimeistä (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Kokeile itse

Kiinnitetty navigointipalkki

Pitää navigointipalkin kiinni sivun ylhäällä tai alhaalla, vaikka käyttäjäkin rullaa sivua:

Kiinnitetty ylhäällä

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Kokeile itse

Kiinnitetty alhaalla

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Kokeile itse

Huomioitavaa:Kiinnitetty sijoitus saattaa olla epäonnistunut mobiililaitteilla.

Harmaa horisontaalinen navigointipalkki

Esimerkki ohuella harmaalla reunalla olevasta harvasta horisontaalisesta navigointipalkista.

Esimerkki

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Kokeile itse

Liimattava navigointipalkki

Lisää <ul>. position: sticky;Luo liimattava navigointipalkki.

Liimattomat elementit vaihtavat suhteellisen ja kiinnitetyn välillä sen mukaan, missä rullausasema on. Se on suhteellisesti sijoitettu, kunnes se kohtaa annetun siirtymäaseman näytöllä - sitten se "liimataan" sopivaan sijaintiin (esim. position:fixed).

Esimerkki

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Kokeile itse

Huomioitavaa:Internet Explorer, Edge 15 ja aikaisemmat versiot eivät tue liimautuvaa sijoittelua. Safari vaatii -webkit- etuliitteen (katso yllä oleva esimerkki). Sinun on myös määritettävä yläjaoikeajaalas tai vasen Vähintään yksi, jotta liimautuva sijoittelu toimii.

Lisää esimerkkejä

Vastausmuotokannan ylätunniste
Miten luoda vastausmuotokannan ylätunniste CSS media-kyselyillä.
Vastausmuotokannan sivupalkki
Miten luoda vastausmuotokannan sivupalkki CSS media-kyselyillä.
Pudotusvalikkopalkki
Miten lisätä pudotusvalikko valikkopalkkiin.