Sliding doors

Tworzymy poziome menu tzw. sliding doors czyli rozsuwane drzwi. Jest to ciekawy motyw, który tworzy jakby zakładki, które po najechaniu myszą zmieniają kolor. Co ważne, technika ta pozwala na dopasowanie szerokości przycisku do długości napisu. Oczywiście długość napisu nie może przekroczyć szerokości obrazka, lub trzeba przygotować odpowiednio szeroki obrazek.

Najpierw tworzymy zwyczajną listę:

<div id=”header”
<ul>
<li><a href=”#”>Home</a></li>
<li id=”current”><a href=”#”>News</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Za tworzenie sliding doors odpowiada arkusz stylów. Tu w tym przykładzie arkusz jest w sekcji head pliku.

Opisujemy header. Ustawiamy szerokość 100% tak aby rozciągnął się na całą stronę. Dodajemy tło obrazkowe.

#header {
float:left;
width:100%;
background:#DAE0D2 url(“bg.gif”) repeat-x bottom;
font-size:93%;
line-height:normal;
}

Opisujemy listę, która jest wewnątrz headera. Usuwamy punkty przed elementami listy.

#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

Opisujemy elementy listy. Ustawiamy float:left który powoduje że lista ustawia się w poziomie. Umieszczamy tło z lewej strony. Obrazek tła pojawi się po lewej strony. Dopełnienie 9px po lewej zrobi miejsce dla obrazka, który będzie stanowił lewą stronę przycisku o zaokrąglonych rogach.

#header li {
float:left;
background:url(“demo2/left_both.gif”) no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}

Opisujemy link każdego elementu listy. Do linku dodajemy obrazek który jest na tyle szeroki że zmiesci się dosć długi napis. Padding ustawiamy tak aby po bokach było 15px. Po prawej dajemy 6px, który uzupełnia poprzednio dodane 9px.

#header a {
float:left;
display:block;
background:url(“demo2/right_both.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}

W tym momencie menu właściwie już wygląda dobrze. Jednak zawija się wraz ze zmniejszaniem okna przeglądarki.

Chcemy aby po najechaniu myszą element zmieniał kolor. Poza tym chcemy aby na danej stronie link do tej strony był innego koloru imitując zakładki. Aby podświetlić zakładkę innym kolorem stosujemy nie 2 różne obrazki, lecz jeden obrazek przesuwany do góry. Aby przesunąć obrazek do góry stosujemy background-position: 0px -150px aby przesunąć obrazek o 150 pixeli w pionie. Dla lewego obrazka dajemy 0 jako pierwszy parametr aby przesunąć go do lewej. Dla prawego obrazka dajemy 100% aby przesunąć go do prawej.

#header #current {
background-position:0 -150px;
border-width:0;
}
#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}

Ta sama metoda służy do podświetlania obrazków. Stosując background-position przesuwamy obrazek w pionie o 150px do góry.

Efekt sliding doors jest w tym momencie gotowy. Ale w tym przypadku ma tę wadę że zwija się po zmniejszeniu okna przeglądarki. Poza tym nie jest wypośrodkowany.  Obecnie bardzo rzadko robi się strony www, gdzie menu jest u góry, na całą szerokość strony i przylegające do lewej.

Szerokie ekrany powodują to, że lepiej jest tworzyć stronę o stałej szerokości (obecnie ok. 1000px). Dlatego przydaloby się aby to meny było wypośrodkowane.

Ładnie wygląda logo, które rozciąga się na całą szerokość strony. Napisy w menu są różnej długości. Można ustawić stałą szerokość dla elementów menu, ale nie zawsze ładnie to wygląda bo krótkie napisy będą miały dużo pustego miejsca po obu stronach. Można też zastosować 2 szerokości dla krótszych i dłuższych napisów.

Żeby wypośrodkować to menu, otoczyłam je w jeszcze jeden div i nadałam mu wysokość i szerokość w pixelach obejmującą menu oraz margin: 0 auto.

Obejrzyj demo.

 

 

na podstawie: http://www.alistapart.com/articles/slidingdoors2/

 

 

Leave a reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.