Vertikální navigační panel CSS

Obsah

    Zobrazit obsah

Vertikální navigační lišta

Chcete-li vytvořit svislý navigační panel, můžete kromě kódu z předchozí stránky upravit styl prvků <a> v seznamu:

Příklad

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

Zkuste to sami →

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

Vysvětlený příklad:

display: block;

- Zobrazení odkazů jako blokových prvků umožňuje kliknout na celou oblast odkazu (nejen na text) a umožňuje nám určit šířku (a výplň, okraj, výšku atd., pokud chcete)

width: 60px;

- Prvky bloku zabírají celou šířku, která je standardně dostupná. Chceme zadat šířku 60 pixelů

Můžete také nastavit šířku <ul> a odstranit šířku <a>, protože zaberou celou šířku dostupnou při zobrazení jako prvky bloku. Výsledkem bude stejný výsledek jako v předchozím příkladu:

Příklad

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

li
a
{
    
display: block;
}

Zkuste to sami →

<!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říklady vertikálního navigačního panelu

Vytvořte základní vertikální navigační panel s šedou barvou pozadí a změnit barvu pozadí odkazů, když uživatel najede myší jim:

Příklad

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

Zkuste to sami →

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

Aktivní/aktuální navigační odkaz

Přidejte k aktuálnímu odkazu „aktivní“ třídu, aby uživatel věděl, na které stránce se nachází:

Příklad

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

Zkuste to sami →

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

Vycentrovat odkazy a přidat ohraničení

Přidejte text-align:center do <li> nebo <a> pro vystředění odkazů.

Přidejte vlastnost border a <ul> přidejte ohraničení kolem navigační lišty. Pokud také chcete ohraničení uvnitř navigační lišty, přidejte border-bottom ke všem prvkům <li> kromě poslední:

Příklad

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

Zkuste to sami →

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

Pevná vertikální navigační lišta v plné výšce

Vytvořte „lepící“ boční navigaci v plné výšce:

Příklad

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

Zkuste to sami →

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

Poznámka: Tento příklad nemusí na mobilních zařízeních fungovat správně.