CSS függőleges navigációs sáv

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Függőleges navigációs sáv

Függőleges navigációs sáv létrehozásához stílusozhatja a listán belül az <a> elemeket, az előző oldal kódja mellett:

Példa

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

Próbálja ki Ön is →

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

Példa magyarázata:

display: block;

- A hivatkozások blokkelemként való megjelenítése a teljes hivatkozási területet kattinthatóvá teszi (nem csak a szöveget), és lehetővé teszi, hogy megadjuk a szélességet (és kitöltés, margó, magasság stb., ha akarod)

width: 60px;

- A blokkelemek alapértelmezés szerint teljes szélességet foglalnak el. 60 pixel szélességet szeretnénk megadni

Beállíthatja az <ul> szélességét, és eltávolíthatja az <a> szélességét, mivel blokkelemként megjelenítve a rendelkezésre álló teljes szélességet elfoglalják. Ezzel ugyanazt az eredményt kapjuk, mint az előző példánkban:

Példa

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

li
a
{
    
display: block;
}

Próbálja ki Ön is →

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

Példák a függőleges navigációs sávra

Hozzon létre egy alapvető függőleges navigációs sávot szürke háttérszínnel és megváltoztathatja a hivatkozások háttérszínét, amikor a felhasználó fölé viszi az egeret őket:

Példa

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óbálja ki Ön is →

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

Aktív/aktuális navigációs hivatkozás

Adjon hozzá egy "aktív" osztályt az aktuális hivatkozáshoz, hogy a felhasználó tudja, melyik oldalon van:

Példa

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

Próbálja ki Ön is →

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

Hivatkozások központosítása és szegélyek hozzáadása

Adja hozzá a text-align:center elemet a <li> vagy az <a> elemhez a hivatkozások középre helyezéséhez.

Adja hozzá a szegély tulajdonságot, hogy <ul> szegélyt adjon a navigációs sáv köré. Ha te is szeretnéd szegélyeket a navigációs sávon belül, adjon hozzá egy border-bottom elemet az összes <li> elemhez, kivéve a utolsó:

Példa

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

Próbálja ki Ön is →

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

Teljes magasságú, rögzített függőleges navigációs sáv

Hozzon létre egy teljes magasságú, „ragadós” oldalsó navigációt:

Példa

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óbálja ki Ön is →

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

Megjegyzés: Előfordulhat, hogy ez a példa nem működik megfelelően mobileszközökön.