nagradzam tutoriale

  • Poziome menu z efektem sliding doors

    dodano 07.06.2008 / komentarzy: 5 / autor: agressiva

    Sliding doors

    Stworzenie poziomego menu z tłem obrazkowym o jednakowych rozmiarach bez wzgledu na długość tekstu w środku bywa czasami kłpotliwe. Ten samouczek pokaże Wam jak bez trudności taki efekt uzyskać.
    Ponad to dowiecie się w jaki sposób uzyskać jeszcze jeden cenny efekt - brak “wczytywania się” kolejnego obrazka podczas najazdu na link, czyli zastosowanie sliding doors.

    Zacznijmy od ustawienia listy w pozycji horyzontalnej oraz nadaniu jej odpowiednich rozmarów.
    Tak wygląda kod xHtml dla listy:

    <div id="menu">
     
        <ul>
          <li><a href="#">O nas</a></li>
          <li><a href="#">Firma</a></li>
          <li><a href="#">Referencje</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Kontakt</a></li>
          <li><a href="http://vivee.info/">Vivee.info</a></li>
          <li><a href="http://waterdesign.glt.pl/">Water Design</a></li>
        </ul>
       
      </div>

    Teraz za pomocą CSSa ustawiamy <li> poziomo, jeden za drugim.
    Są na to dwa sposoby. Jeden to display:inline;, ale my będziemy musieli bardziej skomplikować sprawę.
    Na początek #menu li nadajemy float:left; - dzięki temu ustawią się koło siebie jak elementy liniowe a nie blokowe. Jeżeli chcemy aby tekst w linkach wyświetlany był po środku późniejszego obrazka - nadajemy w tym samym miejscu text-align:center;

    Przed przejściem do następnego kroku musimy naszykować sobie nasz obrazek. Jest on dość specyficzny, bo zawiera na jednej powierzchni od razu efekt dla a oraz a:hover. Muszą one być ustawione jeden pod drugim.
    Ten przygotowany dla tego tutoriala wyglada następująco:

    sliding

    Tło dla #menu ul li a:

    #menu ul li a {
            background:url(li_a.png) no-repeat;
               background-position: 0 0;
            font:12px Tahoma, Arial, Helvetica, sans-serif;
            color:#fff;
            font-weight:bold;
            text-decoration:none;
            width:110px;
            height:24px;
            display:block;
            padding:5px 0 0 0;
            }

    Nasz wcześniej przygotowany obrazek stał się tłem ogólnym i dla li a i dla li a:hover. Teraz w zależności który efekt tła chcemy mieć na poszczególnych wariantach należy patrzeć na background-position: 0 0;. W tym przypadku dla linka zaplanowany był kolor różowy obrazka, który znajduje się na górze, więc jego pozycja i pionie i w poziomie wyniosła 0. Wysokość i szerokość linka jest uzależniona od wymiarów obrazka nadanego na tło (czesc różowa lub szara). Aby to tło pojawiło się nam tak jak chcemy, należy pamiętać od dodania display:block;

    Podobnie postępujemy przy najeździe na linka.
    CSS dla niego wygląda następująco:

    #menu ul li a:hover {
            background:url(li_a.png) no-repeat;
            background-position: 0 -29px;
            color:#595959;
            }

    background-position w pionie oznaczony jest wartością ujemną z tego wzgledu, że część szara obrazka czyli na która pojawia się przy najeżdzie, znajduje się niżej i musi być wyniesiona (na minusie) o swoją wysokość do góry. Pamiętajcie aby przy projektowaniu tła dla linków zwrócić uwagę aby one stykały się ze sobą, bo inaczej utrudnicie sobie sprawe przy dobieraniu odpowiedniego background-position

    Taki sposób “podkładania” tła pod linki jest o tyle korzystny, że nie powoduje nieprzyjemnego efektu “wczytywania się” inne obrazka. Dzieje się tak dlatego, że obydwa obrazki są wczytane od razu podczas pierwszego ładowania strony i zmienia się jedynie położenie tła.

    Praktyczne wykorzystanie tego tutoriala możecie zobaczyć na tej stronie.

    Komentarze / dodaj komentarz


    • autor: Gsi
      dodano: 07.06.2008

      Tylko że jest błąd… daliście zamiast przykładu strony - obrazek %) :)


    • autor: agressiva
      dodano: 07.06.2008

      Już jest ok.


    • autor: Gsi
      dodano: 08.06.2008

      Mozna to tez zrobić za pomoca JS ;p ale ogólnie dobrze i łatwiej w css :)


    • autor: agressiva
      dodano: 08.06.2008

      Można, ale po co się babrać? Najwazniejsze jest jak posługiwać się pozycjonowaniem tła i alles. Nie trzeba w żaden sposob obciążać strony. To jest łatwe proste i przyjemne.


    • autor: pgruszkaster
      dodano: 15.08.2008

      Tutorial bardzo ładnie napisany, ale mam jednak mały problem. Otóż jeśli dopiszę do pierwszej pozycji paddingu zawartość ok. 13px (by tekst był mniej więcej na środku) w #menu ul li a {…} mam mały defekt :( Jeśli paddingi są wyzerowane, wszytko śmiga jak szalone.

      Tutaj można zobaczyć jak to wygląda jeśli padding ma wartość 13px: http://testing.ugu.pl/menu/

    Napisz komentarz