Subskrybuj kanał RSS bloga
Menu horyzontalne stylizowane na zakładki
Menu horyzontalne jest częstym rozwiązaniem w witrynach, które składają się z kilku działów, niekoniecznie ze sobą powiązanych. O ile utworzenie prostego menu nie powinno nikomu sprawić kłopotów, o tyle zrobienie menu stylizowanego na zakładki, czyli z zaokrąglanymi rogami może już przysporzyć nieco problemów, szczególnie jeśli chcemy, aby było ono elastyczne i dostosowywało się do długości napisów w tymże menu.
Tworzenie menu rozpoczynamy od utworzenia listy, którą dla późniejszej wygody umiemy w diva o określonym id, w naszym wypadku - hmenu. Br ze stylem clear: both będzie nam potrzebne w póżniejszym etapie:
<div id="hmenu">
<ul>
<li>
<a href="#">Pozycja 1</a>
</li>
<li>
<a href="#">Pozycja 2</a>
</li>
<li>
<a href="#">Pozycja 3</a>
</li>
</ul>
<br style="clear: both"/>
</div>
Następnym krokiem będzie ostylowanie naszego menu. Stylujemy naszego diva w którym zawiera się menu, nadając kolor jego dolnej ramce. Naszej liście nadajemy zerowe marginesy i padding oraz wyłączamy wyświetlanie kropek.
div#hmenu {
border-bottom: 1px solid #6cf;
}
div#hmenu ul {
margin:0;
padding:0;
list-style:none;
}
Praca idzie w dobrym kierunku, ale na końcowy efekt musimy jeszcze popracować.
Kolejnym elementem, któremu nadamy style jest element listy - li.
div#hmenu li {
float:left;
margin-left: 2px;
background: url("example-images/rogr.gif") no-repeat right top;
background-color: #6cf;
}
Menu nabiera powoli wyglądu zakładek. Użyliśmy obrazka rogr.gif jako tła dla elementu listy, dzieki czemu prawy róg jest zaokrąglony.
Aby uzyskać zaokrąglony róg z drugiej strony każdego elementu, ostylujemy link, czyniąc go elementem blokowym, ustalając mu tło oraz określając style czcionek i padding, aby tekst nie nachodził na rogi:
div#hmenu a {
display: block;
background: url("examples-images/rogl.gif") no-repeat left top;
padding: 3px 10px;
text-decoration: none;
color: black;
font-family: arial;
font-size: 12px;
}
Po nadaniu stylu dla linków menu prezentuje się już bardzo dobrze.
Aby dodać jeszcze trochę smaczku, określimy zmianę koloru po najechaniu myszką na element:
div#hmenu li a:hover {
color: white;
}
Końcowy efekt jest conajmniej satysfakcjonujący .
sf
Pozdrawiam,
<a href="http://sf.jogger.pl">php blog</a>