UWAGA! WYMGANA UMIEJĘTNOŚĆ CSS
Przed rozpoczęciem tej lekcji, zrób lekcje CCS
Przed rozpoczęciem tej lekcji, zrób lekcje CCS
Zacznij naukę CSS
Menu
Aby strona była czytelniejsza, do nawigacji używa się menu. Mogą być poziome, czyli kolejne opcje obok siebie lub pionowe, czyli kolejne opcje pod sobą. Jest to uporządkowana lista odsyłaczy.
Menu poziome - I sposób
Zaczynamy od stworzenia listy odsyłaczy do naszych podstron, czyli zagnieżdżamy
Znacznik
<a> </a>
w <li> </li>
. Znacznik
<nav> </nav>
to rodzaj diva, służy do menu nawigacyjnego.KOD HTML:
<nav>
<ul>
<li><a
href
="index.html"
>
Strona główna</a></li>
<li><a
href
="html5.html"
>
HTML5</a></li>
<li><a
href
="css3.html"
>
CSS3</a></li>
<li><a
href
="slowniczek.html"
>
Słowniczek</a></li>
</ul>
</nav>
Teraz czas na stylizację i formatowanie w CSSie...
KOD CCS:
nav li a
{
display
: inline
;
}
nav a
{
background-color
: orange
;
color
: black
;
font-size
: 15px
;
text-align
: center
;
text-decoration
: none
;
margin-left
: 0px
;
margin-right
: 5px
;
letter-spacing
: 3px
;
font-weight
: bolder
;
border-radius
: 5px 5px 5px 5px
;
padding
: 5px 15px 5px 15px
;
display
: inline-block
;
opacity
: 0.5
;
border
: 1px
solid #666666
;
width
: 210px
;
}
nav ul
{
list-style-type
: none
;
margin
: 0
auto
;
} Efekt:
Menu poziome - II sposób
Isteniej też inny, nieco trudniejszy sposób na wykonanie menu poziomego
Kroki:
Kroki:
- Przekształć elementy listy w elemnty pływające nav ul {float: left}
- Dodaj do odnośników właściwość nav a {display: block}
- Zdefiniuj styl odnośników: tło, ramki
- Ustaw szerokość
Menu pionowe
Tworzy się je w HTMLu dokładnie tak samo jak przy poziomym, czyli zaczynamy od stworzenia listy odsyłaczy do naszych podstron, czyli zagnieżdżamy
<a> </a>
w <li> </li>
KOD HTML:
<nav>
<ul>
<li><a
href
="index.html"
>
Strona główna</a></li>
<li><a
href
="html5.html"
>
HTML5</a></li>
<li><a
href
="slowniczek.html"
>
Słowniczek</a></li>
</ul>
</nav>
Teraz czas na stylizację i formatowanie w CSSie...
KOD CSS:
nav ul li
{
list-style
: none
;
margin
: 8px
;
display
: inline
;
}
nav ul
{
padding
: 0px
;
margin
: 0px
;
text-align
: center
;
}
nav a
{
text-decoration
: none
;
color
: black
;
display
: block
;
border
: 3px
solid
black
;
width
: 100px
;
color
: pink
;
background-color
: white
;
}
nav ul li a
:hover {
color
: white
;
background-color
: pink
;
}
Efekt: