CSS lodret navigationslinje

Indholdsfortegnelse

    Vis indholdsfortegnelse

Lodret navigationslinje

For at bygge en lodret navigationslinje kan du style <a>-elementerne inde i listen, ud over koden fra den forrige side:

Eksempel

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

Prøv det selv →

<!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>

Eksempel forklaret:

display: block;

- Visning af linkene som blokelementer gør hele linkområdet klikbart (ikke kun teksten), og det giver os mulighed for at specificere bredden (og udfyldning, margen, højde osv. hvis du vil)

width: 60px;

- Blokelementer optager som standard hele den tilgængelige bredde. Vi ønsker at angive en 60 pixels bredde

Du kan også indstille bredden af <ul> og fjerne bredden af <a>, da de vil optage hele den tilgængelige bredde, når de vises som blokelementer. Dette vil give det samme resultat som vores tidligere eksempel:

Eksempel

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

li
a
{
    
display: block;
}

Prøv det selv →

<!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>

Eksempler på lodret navigationslinje

Opret en grundlæggende lodret navigationslinje med en grå baggrundsfarve og ændre baggrundsfarven på linkene, når brugeren bevæger musen henover dem:

Eksempel

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;
}

Prøv det selv →

<!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>

Aktivt/aktuelt navigationslink

Tilføj en "aktiv" klasse til det aktuelle link for at lade brugeren vide, hvilken side han/hun er på:

Eksempel

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

Prøv det selv →

<!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>

Centrer links og tilføj grænser

Tilføj text-align:center til <li> eller <a> for at centrere linkene.

Tilføj egenskaben border for at <ul> tilføje en kant rundt om navbaren. Hvis du også vil grænser inde i navbaren, skal du tilføje en border-bottom til alle <li>-elementer, undtagen sidste:

Eksempel

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

Prøv det selv →

<!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>

Fast lodret navigeringslinje i fuld højde

Opret en "klæbende" sidenavigation i fuld højde:

Eksempel

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 */
}

Prøv det selv →

<!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>

Bemærk: Dette eksempel fungerer muligvis ikke korrekt på mobilenheder.