Navigace s ukázkami css - Layout stránky

vydáno: 25.05.2016, seriál: Layout stránky

Toto je 3. díl seriálu Layout stránky, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Díl tohoto seriálu se bude věnovat navigaci na webu. Navigace na webu je jedna z nejdůležitějších částí webové prezentace, neboť na ní závisí pohyb návštěvníka po webu. K vytvoření navigace se používá ostylovaný seznam. V následujících příkladech si ukážeme pár jednoduchých názorných příkladů na jednoúrovňová, dvouúrovňová a tříúrovňová menu. Pro jejich oživení u vybraných příkladů využijeme transition ( přechod ) mezi dvěma prvky.

Jednoúrovňové menu s černým pozadím a oranžovými tlačítky pro hover efekt

V ukázce si ukážeme jednoúrovňové menu se zakulacenými oranžovými tlačítky pro hover efekt.

Zobrazit ukázku

Ukázka:

CSS

h1{
font-size: 24px;
font-weight: bold;
color: #085d5d;
}

ul#navbar {
width: 690px;
height: 45px;
background: #000;
float: left;
list-style: none;
overflow: hidden;
padding-left: 10px;
}

ul#navbar li {
width: auto;
height: auto;
max-height: 45px;
float: left;
}

ul#navbar li a{
width: auto;
height: auto;
padding: 5px 15px;
border-radius: 5px;
margin-top: 10px;
margin-right: 10px;
font-size: 14px;
font-family: Arial;
color: #fff;
float: left;
text-decoration: none;
}

ul#navbar li a:hover{
background: #ffb80e;
border-radius: 5px;
text-decoration: none;
}

Použité vlastnosti: font-size, font-weight, color, width, height, background, float, list-style, overflow, padding-left, max-height, padding, border-radius, margin-top, margin-right, font-family, text-decoration

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>
    <meta charset="utf-8">
    <title>Jednoúrovňové menu s tlačítky s kulatými rohy</title>
</head>

<body>

<h1>Jednoúrovňové menu s černým pozadím a oranžovými tlačítky pro hover efekt odkazu</h1>
<ul id="navbar">
  <li><a href="#" title="První položka">První položka</a></li>
  <li><a href="#" title="Druhá položka">Druhá položka</a></li>
  <li><a href="#" title="Třetí položka">Třetí položka</a></li>
  <li><a href="#" title="Čtvrtá položka">Čtvrtá položka</a></li>
</ul>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <ul>, <li>, <a>

Jednoúrovňové menu světlé s barevným spodním okrajem

Ukázka se spodním zbarveným okrajem a hover efektem po najetí kurzoru na odkaz.

Zobrazit ukázku

Ukázka:

CSS

h1{
font-size: 24px;
font-weight: bold;
color: #085d5d;
}


ul#navbar-light {
width: 690px;
height: auto;
background: #fff;
float: left;
list-style: none;
overflow: hidden;
padding-left: 0px;
}


ul#navbar-light li {
width: auto;
height: auto;
float: left;
}


ul#navbar-light li a{
width: auto;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-bottom: 3px solid #0edaff;
border-right: none;
border-top: 1px solid #ababab;
border-left: 1px solid #ababab;
}


ul#navbar-light li a:hover{
border-bottom: 3px solid #0e6eff;
}

ul#navbar-light li:last-child a{
border-right: 1px solid #ababab;
}

Použité vlastnosti: font-size, font-weight, color, width, height, background, float, list-style, overflow, padding-left, padding, font-family, text-decoration, border-bottom, border-right, border-top, border-left

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>
    <meta charset="utf-8">
    <title>Jednoúrovňové světlé menu s barevným spodním okrajem odkazu</title>
</head>

<body>

<h1>Jednoúrovňové světlé menu s barevným spodním okrajem odkazu</h1>

<ul id="navbar-light">
  <li><a href="#" title="První položka">První položka</a></li>
  <li><a href="#" title="Druhá položka">Druhá položka</a></li>
  <li><a href="#" title="Třetí položka">Třetí položka</a></li>
  <li><a href="#" title="Čtvrtá položka">Čtvrtá položka</a></li>
</ul>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <ul>, <li>, <a>

Jednoúrovňové menu s tlačítky na černém pozadí

Černé menu s tlačítky a plynulým přechodem mezi hover stavem.

Zobrazit ukázku

Ukázka:

CSS

h1{
font-size: 24px;
font-weight: bold;
color: #085d5d;
}


ul#navbar-dark {
width: 650px;
height: 51px;
background: #000;
float: left;
list-style: none;
overflow: hidden;
padding-left: 13px;
}


ul#navbar-dark li {
width: auto;
height: auto;
max-height: 51px;
margin-right: 13px;
float: left;
}


ul#navbar-dark li a{
width: auto;
height: auto;
padding: 5px 20px;
margin-top: 13px;
font-size: 12px;
font-family: Arial;
color: #000;
font-weight: bold;
float: left;
text-decoration: none;
background: #ebe814;
-webkit-transition: background 1s; /* Efekt prechodu */
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}


ul#navbar-dark li a:hover{
background: #ffc90e;
text-decoration: none;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}

Použité vlastnosti: font-size, font-weight, color, width, height, background, float, list-style, overflow, padding-left, max-height, margin-right, padding, margin-top, font-family, text-decoration

HTML

<!DOCTYPE html>
<html lang="cs-CZ">

<head>
    <meta charset="utf-8">
    <title>Jednoúrovňové menu na tmavém pozadí s tlačítky a plynulým přechodem hover efektu</title>
</head>

<body>

<h1>Jednoúrovňové menu na tmavém pozadí s tlačítky a plynulým přechodem hover efektu</h1>

<ul id="navbar-dark">
  <li><a href="#" title="První položka">První položka</a></li>
  <li><a href="#" title="Druhá položka">Druhá položka</a></li>
  <li><a href="#" title="Třetí položka">Třetí položka</a></li>
  <li><a href="#" title="Čtvrtá položka">Čtvrtá položka</a></li>
  <li><a href="#" title="Pátá položka">Pátá položka</a></li>
</ul>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <ul>, <li>, <a>

Dvouúrovňové menu

Svétlé menu se spodním barevným rámečkem a rozbalovacím menu.

Zobrazit ukázku

Ukázka:

CSS

h1{
font-size: 24px;
font-weight: bold;
color: #085d5d;
}



ul#navbar-light {
width: 690px;
height: auto;
background: #fff;
float: left;
list-style: none;
padding-left: 0px;
}



ul#navbar-light li {
width: auto;
height: auto;
float: left;
display: block;
position: relative; /* zmena o proti puvodnimu kodu -  relativni pozice pro zaveseni menu druhe urovne */
}

ul#navbar-light li a{
width: auto;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-bottom: 3px solid #0edaff;
border-right: none;
border-top: 1px solid #ababab;
border-left: 1px solid #ababab;
}

ul#navbar-light li a:hover{
border-bottom: 3px solid #0e6eff;
}

ul#navbar-light li:last-child a{
border-right: 1px solid #ababab;
}

/* Druha uroven */

ul#navbar-light li ul{
position: absolute; /* nastaveni absolutni pozice */
top: 40px; /* absolutni pozice zeshora */
left: 0px; /* absolutni pozice zleva k polozce menu */
width: auto;
height: auto;
list-style: none;
z-index: 10;
padding-left: 0;
display: none;
}

ul#navbar-light li:hover ul{
display: block;
}

ul#navbar-light li:hover a {
  border-bottom: 3px solid #0e6eff; /* zachovani podbarveni po rozbaleni */
}

ul#navbar-light li:hover li a {
  border-bottom: 3px solid #0edaff;
}

ul#navbar-light li:hover li a:hover {
border-bottom: 3px solid #0e6eff;
}

ul#navbar-light li ul li a{
width: 160px;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-right: 1px solid #ababab;
border-top: none;
border-left: 1px solid #ababab;
}

Použité vlastnosti: font-size, font-weight, color, width, height, background, float, list-style, padding-left, display, position, padding, font-family, text-decoration, border-bottom, border-right, border-top, border-left, top, left, z-index

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

    <meta charset="utf-8">

    <title>Dvouúrovňové světlé menu s barevným spodním okrajem odkazu</title>

</head>

<body>

<h1>Dvouúrovňové světlé menu s barevným spodním okrajem odkazu</h1>


<ul id="navbar-light">

  <li><a href="#" title="První položka">První položka</a>
    <ul>
      <li><a href="#" title="Submenu první položka">Submenu první položka</a></li>
      <li><a href="#" title="Submenu druhá položka">Submenu druhá položka</a></li>
      <li><a href="#" title="Submenu třetí položka">Submenu třetí položka</a></li>
    </ul>
  </li>
  <li><a href="#" title="Druhá položka">Druhá položka</a></li>

  <li><a href="#" title="Třetí položka">Třetí položka</a></li>

  <li><a href="#" title="Čtvrtá položka">Čtvrtá položka</a></li>

</ul>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <ul>, <li>, <a>

Tříúrovňové světlé menu s plynulým přechodem mezi hover efektem

Menu s dvěma rozbalovacíma úrovněma doplněné o přechody mezi hover efekty.

Zobrazit ukázku

Ukázka:

CSS

h1{
font-size: 24px;
font-weight: bold;
color: #085d5d;
}

ul#navbar-light {
width: 690px;
height: auto;
background: #fff;
float: left;
list-style: none;
padding-left: 0px;
}

ul#navbar-light li {
width: auto;
height: auto;
float: left;
display: block;
position: relative; /* zmena o proti puvodnimu kodu -  relativni pozice pro zaveseni menu druhe urovne */
}

ul#navbar-light li a{
width: auto;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-bottom: 3px solid #0edaff;
border-right: none;
border-top: 1px solid #ababab;
border-left: 1px solid #ababab;
-webkit-transition: border-bottom 1s; /* Efekt prechodu */
-moz-transition: border-bottom 1s;
-o-transition: border-bottom 1s;
transition: border-bottom 1s;
}

ul#navbar-light li a:hover{
border-bottom: 3px solid #0e6eff;
-webkit-transition: border-bottom 1s; /* Efekt prechodu */
-moz-transition: border-bottom 1s;
-o-transition: border-bottom 1s;
transition: border-bottom 1s;
}

ul#navbar-light li:last-child a{
border-right: 1px solid #ababab;
}

/* Druha uroven */

ul#navbar-light li ul{
position: absolute; /* nastaveni absolutni pozice */
top: 40px; /* absolutni pozice zeshora */
left: 0px; /* absolutni pozice zleva k polozce menu */
width: auto;
height: auto;
list-style: none;
z-index: 10;
padding-left: 0;
display: none;
}

ul#navbar-light li:hover ul{
display: block;
}

ul#navbar-light li:hover a {
  border-bottom: 3px solid #0e6eff;
  -webkit-transition: border-bottom 1s; /* Efekt prechodu */
  -moz-transition: border-bottom 1s;
  -o-transition: border-bottom 1s;
  transition: border-bottom 1s;
}

ul#navbar-light li:hover li a {
  border-bottom: 3px solid #0edaff;
  -webkit-transition: border-bottom 1s; /* Efekt prechodu */
  -moz-transition: border-bottom 1s;
  -o-transition: border-bottom 1s;
  transition: border-bottom 1s;
}

ul#navbar-light li:hover li a:hover {
border-bottom: 3px solid #0e6eff;
}

ul#navbar-light li ul li a{
width: 160px;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-right: 1px solid #ababab;
border-top: none;
border-left: 1px solid #ababab;
-webkit-transition: border-bottom 1s; /* Efekt prechodu */
-moz-transition: border-bottom 1s;
-o-transition: border-bottom 1s;
transition: border-bottom 1s;
}

/* Treti uroven */

ul#navbar-light li ul li ul{
position: absolute; /* nastaveni absolutni pozice */
top: 0px; /* absolutni pozice zeshora */
left: 200px; /* absolutni pozice zleva k polozce menu */
width: auto;
height: auto;
list-style: none;
z-index: 10;
padding-left: 0;
display: none !important;
}

ul#navbar-light li ul li:hover ul{
display: block !important;
}

ul#navbar-light li ul li:hover a {
  border-bottom: 3px solid #0e6eff;
}

ul#navbar-light li ul li:hover li a {
  border-bottom: 3px solid #0edaff;
  -webkit-transition: border-bottom 1s; /* Efekt prechodu */
  -moz-transition: border-bottom 1s;
  -o-transition: border-bottom 1s;
  transition: border-bottom 1s;
}

ul#navbar-light li:hover ul li:hover li a:hover {
border-bottom: 3px solid #0e6eff;
-webkit-transition: border-bottom 1s; /* Efekt prechodu */
-moz-transition: border-bottom 1s;
-o-transition: border-bottom 1s;
transition: border-bottom 1s;
}

ul#navbar-light li ul li ul li a{
width: 160px;
height: auto;
padding: 11px 20px;
font-size: 14px;
font-family: Arial;
color: #000;
float: left;
text-decoration: none;
border-right: 1px solid #ababab;
border-top: none;
border-left: 1px solid #ababab;
}

ul#navbar-light li ul li ul li:first-child a{
border-top: 1px solid #ababab;
border-left: none;
}

HTML

<!DOCTYPE html>

<html lang="cs-CZ">
<head>
    <meta charset="utf-8">
    <title>Tříúrovňové světlé menu s barevným spodním okrajem odkazu</title>
</head>

<body>

<h1>Tříúrovňové světlé menu s barevným spodním okrajem odkazu</h1>

<ul id="navbar-light">
  <li><a href="#" title="První položka">První položka</a>
    <ul>
      <li><a href="#" title="Submenu první položka">Submenu první položka</a></li>
      <li><a href="#" title="Submenu druhá položka">Submenu druhá položka</a></li>
      <li><a href="#" title="Submenu třetí položka">Submenu třetí položka</a>
        <ul>
         <li><a href="#" title="Submenu první položka">Submenu první položka</a></li>
         <li><a href="#" title="Submenu druhá položka">Submenu druhá položka</a></li>
         <li><a href="#" title="Submenu třetí položka">Submenu třetí položka</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#" title="Druhá položka">Druhá položka</a></li>

  <li><a href="#" title="Třetí položka">Třetí položka</a></li>

  <li><a href="#" title="Čtvrtá položka">Čtvrtá položka</a></li>

</ul>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <ul>, <li>, <a>

Závěrem

V dnešním díle seriálu jsme se naučili tvořit navigační menu pro webové stránky včetně efektu pomalého najíždení pozadí či jiné části. V dalších dílech seriálu si ukážeme úskalí responsivního menu a jak se dělá.

HTML: návody jak psát html tagy

Témata

Seriály

Navigace s ukázkami css - Layout stránky

Jednoúrovňové menu s černým pozadím a oranžovými tlačítky pro hover efekt

Jednoúrovňové menu světlé s barevným spodním okrajem

Jednoúrovňové menu s tlačítky na černém pozadí

Dvouúrovňové menu

Tříúrovňové světlé menu s plynulým přechodem mezi hover efektem

Závěrem

Seriál Layout stránky

Seznam všech článků seriálu: