CSS-pystysuuntainen navigointipalkki


Sisällysluettelo

    Näytä sisällysluettelo


Pystysuuntainen navigointipalkki

Pystysuuntaisen navigointipalkin luomiseksi voit muotoilla <a>-elementtejä luettelossa edellisen sivun koodin lisäksi:

Esimerkki

li a
{
   
display: block;
   
width: 60px;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>


Esimerkki selitettynä:

display: block;

- Linkkien näyttäminen lohkoelementteinä tekee koko linkkialueen napsautettavan (ei vain tekstiä), ja sen avulla voimme määrittää leveyden (ja täytön, marginaalin, korkeuden jne. jos haluat)

width: 60px;

- Lohkoelementit vievät oletusarvoisesti käytettävissä olevan koko leveyden. Haluamme määrittää 60 pikselin leveyden

Voit myös asettaa <ul>:n leveyden ja poistaa <a>:n leveyden, koska ne täyttävät käytettävissä olevan koko leveyden, kun ne näytetään lohkoelementteinä. Tämä tuottaa saman tuloksen kuin edellinen esimerkkimme:

Esimerkki

  ul
{
    
list-style-type: none;
    
margin: 0;
    
padding: 0;
  width: 60px;
}

li
a
{
    
display: block;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>




Esimerkkejä pystysuuntaisesta navigointipalkista

Luo pystysuuntainen perusnavigointipalkki harmaalla taustavärillä ja muuttaa linkkien taustaväriä, kun käyttäjä siirtää hiiren osoittimen päälle niitä:

Esimerkki

ul {
  list-style-type: none;
  
margin: 0;
  padding: 0;
  width: 
200px;
  background-color: #f1f1f1;
}
li a {
  display: 
block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
/* 
Change the link color on hover */
li a:hover {
  
background-color: #555;
  color: white;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Aktiivinen/nykyinen navigointilinkki

Lisää "aktiivinen" luokka nykyiseen linkkiin, jotta käyttäjä tietää, millä sivulla hän on:

Esimerkki

.active {
  background-color: #04AA6D;
  
color: white;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Keskitä linkit ja lisää rajoja

Lisää text-align:center kohtaan <li> tai <a> keskittääksesi linkit.

Lisää ominaisuus reuna, jos haluat <ul> lisätä reunan navigointipalkin ympärille. Jos myös haluat reunat navigointipalkin sisällä, lisää border-bottom kaikkiin <li>-elementteihin, paitsi viimeinen:

Esimerkki

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
    
border-bottom: 1px solid #555;
}
li:last-child {
  
border-bottom: none;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Täyskorkea kiinteä pystysuuntainen navigointipalkki

Luo täyskorkea, "tahmea" sivunavigointi:

Esimerkki

ul {
  list-style-type: none;
  
margin: 0;
  padding: 0;
  width: 
25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
    position: fixed; /* 
Make it stick, even on scroll */
  
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>


Huomaa: tämä esimerkki ei ehkä toimi oikein mobiililaitteissa.