«

»

Lis 03

Wydrukuj to Wpis

Menu w CSS

Menu-w-CSS

Menu nawigacji jest ważnym elementem każdej strony internetowej, dlatego w tym artykule postaram się pokazać jak stworzyć menu za pomocą CSS. Dzięki CSS możesz zmienić nudne menu HTML w stylową nawigację. W tym przykładzie będziemy tworzyć nieuporządkowaną listę nawigacji używając <ul> i <li> tagów.


Przykład dokumentu HTML:

<ul class="main-navigation">
  <li><a href="strona-glowna.html">Strona Główna</a></li>
  <li><a href="kody-zrodlowe.html">Kody źródłowe</a></li>
  <li><a href="gotowe-skrypty.html">Gotowe skrypty</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

Teraz musimy usunąć listę markerów:

ul
{
  list-style-type:none;
}

Aby utworzyć pionowe menu, musimy tylko stylizować linki dodając następujący kod:

a, a:link,a:visited
{
  display:block; 
  width:160px; 
  color:#000; 
  padding:5px; 
  text-decoration:none; 
  text-transform:uppercase; 
}
a:hover,a:active
{
 font-weight:bold;
}
Przykład pionowego menu:



Istnieją dwa sposoby tworzenia poziomego menu wykorzystujące: inline i float.

Korzystać można z obu metod, ale jeśli chcesz, aby linki były tej samej wielkości, lepiej użyć metody float.

li
{
  float:left;
  /* display:inline; */
}
Przykład poziomego menu:

Załączniki do pobrania

  • rar menu
    HTML Document
    Rozmiar pliku: 984 B Pobrania: 88

Permalink do tego artykułu: http://tmall.com.pl/menu-w-css/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>