Latest web development tutorials

CSS pasek nawigacyjny

Przykład: pasek nawigacji


Pasek nawigacji

Zręczne wykorzystanie nawigacji dla każdej strony jest bardzo ważna.

Z CSS można przekształcić w ładnym pasku nawigacyjnym zamiast menu HTML nudnych.


linki nawigacyjne list =

Jako standardowy pasek nawigacyjny oparty HTML jest koniecznością

, W naszym przykładzie będziemy tworzyć listy HTML standardowy pasek nawigacyjny.

Pasek nawigacyjny jest w zasadzie lista linków, więc używaj <ul> i <li> elementy są bardzo wymowne:

Przykłady

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Spróbuj »

A teraz usunąć marginesy i dopełnienia z listy:

Przykłady

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

Spróbuj »

Przykłady analizy:

  • list-style-type: none - przed wyjęciem listę małych flag. Pasek nawigacyjny nie musi znaczniki list
  • Usuń ustawienie domyślne marginesy i dopełnienia skonfigurować przeglądarkę do 0

Powyższy przykład kodu jest w standardowych kodów pionowego i poziomego paska nawigacyjnego wykorzystywanych.


Pionowy pasek nawigacyjny

Powyższy kod, musimy tylko elementy stylu <A> utworzenia pionowego paska nawigacji:

Przykłady

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

Spróbuj »

Przykład pokazuje:

  • display: block - wyświetlacz łączy elementu bloku tak, że całość staje się obszar klikalny link (nie tylko tekstowe), co pozwala nam określić szerokość
  • width: 60px - elementy blokowe domyślnie jest maksymalna szerokość. Chcemy, aby określić szerokość 60 pikseli

Wskazówka: Zobacz przykład pełnego stylu pionowego paska nawigacyjnego .

Uwaga: Pamiętaj, aby określić szerokość elementu w pionie Pasek nawigacyjny <a> 's.Jeśli pominąć szerokość, IE6 może spowodować nieoczekiwane rezultaty.


Poziomy pasek nawigacyjny

Istnieją dwa sposoby, aby utworzyć poziomy pasek nawigacyjny. Za pomocąwbudowanych lub pływającychelementów listy.

Oba sposoby są w porządku, ale jeśli chcesz połączyć się do tego samego rozmiaru, należy użyć metody pływającej.

Inline elementy listy

Jeden zbudować poziomy pasek nawigacyjny jest określenie

  • Element, powyższy kod jest standardem wbudowana:

    Przykłady

    li
    {
    display:inline;
    }

    Spróbuj »

    Przykłady analizy:

    • display: inline; - domyślnie <li> elementem jest element bloku. Tutaj usuwamy podziały wiersza przed i po każdym elemencie listy, aby wyświetlić linię.

    Wskazówka: Zobacz przykład pełnego stylu poziomym pasku nawigacyjnym .

    Pływające elementy listy

    W powyższym przykładzie łącza mają różne szerokości.

    Dla wszystkich linków o jednakowej szerokości, float <li> element i określ szerokość elementu <a>:

    Przykłady

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

    Spróbuj »

    Przykłady analizy:

    • pływaka: po lewej - użyj slajdy elementu suwakowego obok siebie
    • display: block - wyświetlacz łączy elementu bloku tak, że całość staje się obszar klikalny link (nie tylko tekstowe), co pozwala nam określić szerokość
    • width: 60px - elementy blokowe domyślnie jest maksymalna szerokość. Chcemy, aby określić szerokość 60 pikseli

    Wskazówka: Patrz przykład w pełni stylu poziomym pasku nawigacyjnym. .