Κάθετη γραμμή πλοήγησης CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Κάθετη γραμμή πλοήγησης

Για να δημιουργήσετε μια κάθετη γραμμή πλοήγησης, μπορείτε να διαμορφώσετε τα στοιχεία <a> μέσα στη λίστα, εκτός από τον κώδικα από την προηγούμενη σελίδα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα που εξηγείται:

display: block;

- Η εμφάνιση των συνδέσμων ως στοιχεία μπλοκ κάνει κλικ σε ολόκληρη την περιοχή του συνδέσμου (όχι μόνο στο κείμενο) και μας επιτρέπει να καθορίσουμε το πλάτος (και το padding, το περιθώριο, το ύψος κ.λπ., αν θέλετε)

width: 60px;

- Τα στοιχεία μπλοκ καταλαμβάνουν όλο το πλάτος που είναι διαθέσιμο από προεπιλογή. Θέλουμε να καθορίσουμε ένα πλάτος 60 pixel

Μπορείτε επίσης να ορίσετε το πλάτος του <ul> και να αφαιρέσετε το πλάτος του <a>, καθώς θα καταλαμβάνουν όλο το διαθέσιμο πλάτος όταν εμφανίζονται ως στοιχεία μπλοκ. Αυτό θα παράγει το ίδιο αποτέλεσμα με το προηγούμενο παράδειγμά μας:

Παράδειγμα

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

li
a
{
    
display: block;
}

Δοκιμάστε το μόνοι σας →

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

Παραδείγματα κάθετης γραμμής πλοήγησης

Δημιουργήστε μια βασική κάθετη γραμμή πλοήγησης με γκρι χρώμα φόντου και αλλάξτε το χρώμα φόντου των συνδέσμων όταν ο χρήστης μετακινεί το ποντίκι από πάνω τους:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ενεργός/Τρέχον σύνδεσμος πλοήγησης

Προσθέστε μια "ενεργή" τάξη στον τρέχοντα σύνδεσμο για να ενημερώσετε τον χρήστη σε ποια σελίδα βρίσκεται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Κέντρο συνδέσμων και προσθήκη περιγραμμάτων

Προσθέστε text-align:center στο <li> ή <a> για να κεντράρετε τους συνδέσμους.

Προσθέστε την ιδιότητα border για να <ul> προσθέσετε ένα περίγραμμα γύρω από τη γραμμή πλοήγησης. Αν θέλεις κι εσύ περιγράμματα μέσα στη γραμμή πλοήγησης, προσθέστε ένα border-bottom σε όλα τα στοιχεία <li>, εκτός από το τελευταίο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Σταθερή κάθετη γραμμή πλοήγησης σε όλο το ύψος

Δημιουργήστε μια πλαϊνή πλοήγηση σε όλο το ύψος, "κολλώδης":

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Σημείωση: Αυτό το παράδειγμα ενδέχεται να μην λειτουργεί σωστά σε κινητές συσκευές.