Artykuły:

Reklama na blogach - Blogvertising.pl
  • data publikacji: 06.01.2010

    Menu przesuwane

    kategoria: XHTML/CSS autor: prz-emo

    Często zastanawiasz się jak zrobić obrazkowe menu, aby szybko się ładowało i zajmowało jak najmniej miejsca? Zastosuj do niego CSS i tylko jeden plik graficzny.

    Na czym to polega? Każdy element wczytuje tylko fragment obrazka – tego samego. Dlatego raz załadowany plik jest ciągle "przesuwany".

    Zacznijmy od przygotowania pliku graficznego. Będzie on się składał z "potrójnego menu", mianowicie: tworzymy nowy plik o wysokości trzykrotnie większej niż docelowe menu. Na samej górze umiejscowiłem samo tło, bez napisów. Niżej znajdują się linkami(napisy), a na samym dole
    - hovery (napis + podkreślenie). Efekt:

    HTML

    Nasz kod oprzemy na liście. W tym celu tworzymy następującą strukturę:

    <ul id="menu">
            <li><a href="#" title="I.J. Paderewski">I.J. Paderewski</a></li>
            <li><a href="#" title="Centrum">Centrum</a></li>
            <li><a href="#" title="Muzeum">Muzeum</a></li>
            <li><a href="#" title="Noclegi">Noclegi</a></li>
            <li><a href="#" title="Aktualności">Aktualności</a></li>
            <li><a href="#" title="Kalendarz">Kalendarz</a></li>
            <li><a href="#" title="Sponsorzy">Sponsorzy</a></li>
            <li><a href="#" title="Wydawnictwa">Wydawnictwa</a></li>
            <li><a href="#" title="Kontakt">Kontakt</a></li>
    </ul>

    Dodatkowo każdy element listy będzie posiadał inaczej przesunięte tło, dlatego dodajemy do każdego li classę:

    <ul id="menu">
            <li class=”men1”><a href="#" title="I.J. Paderewski">I.J. Paderewski</a></li>
            <li class=”men2”><a href="#" title="Centrum">Centrum</a></li>
            <li class=”men3”><a href="#" title="Muzeum">Muzeum</a></li>
            <li class=”men4”><a href="#" title="Noclegi">Noclegi</a></li>
            <li class=”men5”><a href="#" title="Aktualności">Aktualności</a></li>
            <li class=”men6”><a href="#" title="Kalendarz">Kalendarz</a></li>
            <li class=”men7”><a href="#" title="Sponsorzy">Sponsorzy</a></li>
            <li class=”men8”><a href="#" title="Wydawnictwa">Wydawnictwa</a></li>
            <li class=”men9”><a href="#" title="Kontakt">Kontakt</a></li>
    </ul>

    Nasz html jest gotowy, przejdźmy więc do CSS który jest tutaj kluczowym elementem.

    CSS

    Osobiście często na samym początku dodaję kilka właściwości, które później ułatwiają pisanie kodu:

    * {
            margin: 0;
            padding: 0;
            border: 0;
            text-decoration: none;
            font-family: tahoma;
            background-repeat: no-repeat;
            font-size: 12px;
            color: #dbd786;
    }

    Samemu menu dodamy standardowe style:

    #menu {
            list-style: none;
            display: block;
            clear: both;
            width: 879px;
            height: 45px;
            background-image: url('images/menu.png');
            padding: 0 36px 0 25px;
    }

    #menu li {
            display: block;
            float: left;
    }

    #menu li a {
            display: block;
            height: 45px;
            font-size: 11px;
    }

    Jak widać, nie ma nic specjalnego, poza tym, iż ustaliłem ogólne wartości dla każdego elementu listy oraz linków. Menu otrzymało jako tło obrazek bez żadnych parametrów przesunięcia, ponieważ domyślnie nie jest on wcale przesunięty. Czas na ustawienie tła i przypisanie go do poszczególnych class.

    Musimy wyświetlić tylko zaznaczony na obrazku fragment pliku:

    Dlatego, podajemy w CSS, do a w elemencie o id menu i class .menu1:

    • szerokość fragmentu
    • obrazek, który będzie tłem
    • przesunięcie obrazka

    *opcjonalnie można dodać inne parametry, w moim przypadku jest to prawy margines

    #menu .men1 a {
            width: 118px;
            background-image: url('../images/menu.png');
            background-position: -25px -45px;
            margin-right: 21px;
    }

    Krótkie wyjaśnienie: background-position określa, o ile tło ma być przesunięte względem lewej i górnej krawędzi, czyli w lewo i w dół. U nas natomiast, musimy zrobić na odwrót – obrazek przemieszczamy w górę i w prawo – stąd podajemy wartości ujemne. Atrybuty dla tła, możemy także zapisać w skróconej formie:
    background: url('../images/menu.png') -25px -45px;

    Podobnie postępujemy w wypadku hovera, którym jest fragment niżej:

    Nasz kod wygląda tak:

    #menu .men1 a:hover  {
            background: url('../images/menu.png') -25px -90px;
    }

    Nie musimy tutaj określać już nic, poza przesunięciem i obrazkiem tła. Analogicznie postępujemy z każdym kolejnym linkiem, tworząc taki oto kod css:

    #menu .men1 a { width: 118px; background: url('../images/menu.png') -25px -45px; margin-right: 21px;}
    #menu .men1 a:hover, #menu .men1 a.active  { background: url('../images/menu.png') -25px -90px;}
    #menu .men2 a { width: 64px; background: url('../images/menu.png') -164px -45px; margin-right: 21px;}
    #menu .men2 a:hover, #menu .men2 a.active { background: url('../images/menu.png') -164px -90px;}

    #menu .men3 a { width: 63px; background: url('../images/menu.png') -249px -45px; margin-right: 21px;}
    #menu .men3 a:hover, #menu .men3 a.active { background: url('../images/menu.png') -249px -90px;}

    #menu .men4 a { width: 56px; background: url('../images/menu.png') -333px -45px; margin-right: 19px;}
    #menu .men4 a:hover, #menu .men4 a.active { background: url('../images/menu.png') -333px -90px;}

    #menu .men5 a { width: 90px; background: url('../images/menu.png') -408px -45px; margin-right: 20px;}
    #menu .men5 a:hover, #menu .men5 a.active { background: url('../images/menu.png') -408px -90px;}

    #menu .men6 a { width: 78px; background: url('../images/menu.png') -518px -45px; margin-right: 20px;}
    #menu .men6 a:hover, #menu .men6 a.active { background: url('../images/menu.png') -518px -90px;}

    #menu .men7 a { width: 78px; background: url('../images/menu.png') -616px -45px; margin-right: 22px;}
    #menu .men7 a:hover, #menu .men7 a.active { background: url('../images/menu.png') -616px -90px;}

    #menu .men8 a { width: 106px; background: url('../images/menu.png') -716px -45px; margin-right: 21px;}
    #menu .men8 a:hover, #menu .men8 a.active { background: url('../images/menu.png') -716px -90px;}

    #menu .men9 a { width: 61px; background: url('../images/menu.png') -843px -45px;}
    #menu .men9 a:hover, #menu .men9 a.active { background: url('../images/menu.png') -843px -90px;}
     

    Pozostają nam 2 problemy. Dodaliśmy tekst w kodzie html, i jest on wyświetlany na naszych obrazkach. Ukryjemy go, dodając do li wcięcie – o dowolnej wartości. Ja na wszelki wypadek podaję bardzo duże, w tym przypadku będzie to -30000px.
    text-indent: -30000px;

    Natomiast drugim problemem są nieładnie wyglądające ramki tworzące się wokół linków podczas kliknięcia i przytrzymania odnośnika. Niektórzy posługujący się samą klawiaturą do przeglądania stron widzą dzięki nim gdzie się znajdują – tutaj jednak psują one całe piękno menu. Usuniemy je zatem, za pomocą
    outline: none;

    Dodatkowo, jeśli chcemy, aby zaznaczyć użytkownikowi przeglądającemu stronę, gdzie się znajduje, możemy dodać classę odpowiedzialną za to. W kodzie html wygląda to tak:

    <li class=”men1”><a href="#" class=”active” title="I.J. Paderewski">I.J. Paderewski</a></li>

    W CSS musimy tylko dodać do każdej definicji hovera dopisać #menu classa a.active, np.

    #menu .men1 a:hover, #menu men1 a.active

    W rezultacie czego otrzymujemy gotowe menu. Całość:

    HTML:

    <ul id="menu">
            <li class=”men1”><a href="#" class=”active” title="I.J. Paderewski">I.J. Paderewski</a></li>
            <li class=”men2”><a href="#" title="Centrum">Centrum</a></li>
            <li class=”men3”><a href="#" title="Muzeum">Muzeum</a></li>
            <li class=”men4”><a href="#" title="Noclegi">Noclegi</a></li>
            <li class=”men5”><a href="#" title="Aktualności">Aktualności</a></li>
            <li class=”men6”><a href="#" title="Kalendarz">Kalendarz</a></li>
            <li class=”men7”><a href="#" title="Sponsorzy">Sponsorzy</a></li>
            <li class=”men8”><a href="#" title="Wydawnictwa">Wydawnictwa</a></li>
            <li class=”men9”><a href="#" title="Kontakt">Kontakt</a></li>
    </ul>

    CSS:

    * {
            margin: 0;
            padding: 0;
            border: 0;
            text-decoration: none;
            font-family: tahoma;
            background-repeat: no-repeat;
            font-size: 12px;
            color: #dbd786;
    }

    #menu {
            list-style: none;
            display: block;
            clear: both;
            width: 879px;
            height: 45px;
            background-image: url('../images/menu.png');
            padding: 0 36px 0 25px;
    }

    #menu li {
            display: block;
            float: left;
            text-indent: -30000px;
    }

    #menu li a {
            display: block;
            height: 45px;
            outline: none;
            font-size: 11px;
    }

    #menu .men1 a { width: 118px; background: url('../images/menu.png') -25px -45px; margin-right: 21px;}
    #menu .men1 a:hover, #menu .men1 a.active  { background: url('../images/menu.png') -25px -90px;}

    #menu .men2 a { width: 64px; background: url('../images/menu.png') -164px -45px; margin-right: 21px;}
    #menu .men2 a:hover, #menu .men2 a.active { background: url('../images/menu.png') -164px -90px;}

    #menu .men3 a { width: 63px; background: url('../images/menu.png') -249px -45px; margin-right: 21px;}
    #menu .men3 a:hover, #menu .men3 a.active { background: url('../images/menu.png') -249px -90px;}

    #menu .men4 a { width: 56px; background: url('../images/menu.png') -333px -45px; margin-right: 19px;}
    #menu .men4 a:hover, #menu .men4 a.active { background: url('../images/menu.png') -333px -90px;}

    #menu .men5 a { width: 90px; background: url('../images/menu.png') -408px -45px; margin-right: 20px;}
    #menu .men5 a:hover, #menu .men5 a.active { background: url('../images/menu.png') -408px -90px;}

    #menu .men6 a { width: 78px; background: url('../images/menu.png') -518px -45px; margin-right: 20px;}
    #menu .men6 a:hover, #menu .men6 a.active { background: url('../images/menu.png') -518px -90px;}

    #menu .men7 a { width: 78px; background: url('../images/menu.png') -616px -45px; margin-right: 22px;}
    #menu .men7 a:hover, #menu .men7 a.active { background: url('../images/menu.png') -616px -90px;}

    #menu .men8 a { width: 106px; background: url('../images/menu.png') -716px -45px; margin-right: 21px;}
    #menu .men8 a:hover, #menu .men8 a.active { background: url('../images/menu.png') -716px -90px;}

    #menu .men9 a { width: 61px; background: url('../images/menu.png') -843px -45px;}
    #menu .men9 a:hover, #menu .men9 a.active { background: url('../images/menu.png') -843px -90px;}

    Efekt końcowy: http://paderewski.prz-emo.com

    Sam sposób można zastosować w wielu przypadkach, np. jeśli mamy linki którymi są ikonki. Podobny sposób stosuje np. Allegro, ale to zostawiam Wam samym do sprawdzenia :)
    Dziękuję za uwagę i życzę miłego kodowania :) .

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop
    Tagi:,
  • Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

    Zobacz podobne wpisy:

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    18 Responses to “Menu przesuwane”

    1. Piotr Sajnog mówi:
      6 01 2010 o 18:42

      Efekt jest ok, ale pod warunkiem, że znamy już tytuły wszystkich stron w serwisie i ich liczba jest stała. Pozostaje nam ewentualne wydłużanie grafiki i zmiana kodu w plikach, zgadza się? A co zrobić np. z WordPressem, gdzie menu generowane jest dynamicznie za pomocą funkcji? Chyba w tym przypadku ten efekt się nie sprawdzi. Mam rację?

      Odpowiedz
    2. Agressiva mówi:
      6 01 2010 o 18:47

      jest to właśnie menu przygotowane na wypadek kiedy wiemy jakie będą podstrony i ich nazwy się nie zmienią,

      ale myślę, ze w przypadku menu z układem poziomym, kiedy znany jego stała szerokość też można pobawić sie w takim tłem nawet jak linki są tekstowe – ale mówię, tak mi się wydaje, musiałabym wytestować.

      Odpowiedz
    3. Piotr Sajnog mówi:
      6 01 2010 o 18:54

      Ogólnie efekt jest przyjemny bo nie ma opóźnienia związanego z wgrywaniem kolejnych grafik. Wygląda więc jakby było zrobione samym CSSem. Podoba mi się :)

      Odpowiedz
    4. Agressiva mówi:
      6 01 2010 o 18:58

      no i jest podobnie działa sliding doors – też polega na przesuwaniu obrazka za pomocą background-position : http://vivee.info/2008/06/07/poziome-menu-z-efekt...

      Odpowiedz
    5. Piotr Sajnog mówi:
      6 01 2010 o 19:11

      Jak będę gruntownie zmieniać kiedyś wygląd bloga – pomyślę nad tym :)

      Odpowiedz
    6. Kuras mówi:
      6 01 2010 o 20:22

      Tylko po co powtarzać background: url(‘../images/menu.png’)???
      Można dać samo np background-position: -518px -90px;

      Odpowiedz
    7. prz-emo mówi:
      6 01 2010 o 20:28

      Efekt wygląda jakby było zrobione samym CSSem, bo jest tylko nim zrobione ;)
      Co do wordpressa – jeśli nie znamy szerokości danego linku mamy do wyboru jeszcze jedną opcje – robimy jedną grafikę, o stałej szerokości z hoverem pod spodem. Szerokość przyjmujemy dosyć sporą, i wtedy ustawiamy wyśrodkowanie tekstu.

      Jeszcze pomyślę nad czymś z tym związanym, ale można się też w co innego pobawić – nadajemy jedno tło dla a – powielane, dla LI stałe i dorzucamy na końcu li span, img – i im 3 tło. Wtedy, jeśli mamy dłuższy link, powiela się tło w a, a boki – początek i koniec – tworzy li i np. span – są stałe :) . Może nie za ładnie w kodzie to wygląda:

    8. link<img src…. />

      9. ale zawsze można próbować :)

      Odpowiedz
  • prz-emo mówi:
    6 01 2010 o 20:48

    W sumie prawda, wystarczy przypisać do a i później nie będzie takiej konieczności. Mea culpa

    Odpowiedz
  • Kuras mówi:
    6 01 2010 o 23:58

    Jeszcze jedno… po co plik menu jest potrójny? Skoro pierwsze 45px w przykładzie nieużywane… Twój plik waży 58kb po przycięciu będzie miał 51.
    Druga sprawa skoro napisy nie zmieniają się podczas najechania na nie to może lepiej zrobić tak aby pojawiało się samo podkreślenie.
    Robiąc tak jak piszę pliki będą zajmować jakieś połowę tego co podałem, a kod CSS będzie jeszcze bardziej prosty.
    Zobacz poniżej.
    Są wciągane dwa pliki jeden to twoja grafika z napisami (ale bez podkreślenia) + sam plik z kreseczką "kreska.gif". Kreska nie waży nawet 1kb a napisy mają z 18.
    <style>
    ul#menu { background: url(norma.gif); width:940px; height:45px; list-style:none; padding:0; margin:0 }
    ul#menu li { display: block; float: left; }
    ul#menu li a { margin-left:20px; height:45px; display:block; text-indent:-9999px}
    ul#menu li a:hover,
    ul#menu li a.active { background-image:url(kreska.gif); background-repeat:no-repeat; background-position:bottom center}
    ul#menu li a#menu1 { margin-left:25px; width:118px;}
    ul#menu li a#menu2 { width:64px;}
    ul#menu li a#menu3 { width:63px;}
    </style>
    <ul id="menu">
    <a id="menu1" class="active" href="">I.J. Paderewski
    <a id="menu2" href="">Centrum
    <a id="menu3" href="">Muzeum

    Odpowiedz
  • Kuras mówi:
    7 01 2010 o 00:02

    O! Ale zwaliło kod. Podeśle ci na maila.

    Odpowiedz
    • prz-emo mówi:
      7 01 2010 o 14:32

      Co do pierwszych 45px – zgodzę się, ale nigdy nie wiesz, czy na pewno wszystkie te linki w menu zostaną. Tutaj jest zrobione w ten sposób, że jeśli ktoś usunie link, to zostanie pod nim tło – a w Twoim rozwiązaniu nie jest to uwzględnione.

      Co do obrazka – jeśli jest pewne, że żadna podstrona nie ulegnie usunięciu lub chwilowemu nawet niewyświetlaniu – zgodzę się z Twoim rozwiązaniem. A wracając do optymalizacji grafiki – można, ale chodziło w tutku o pokazanie, na czym cała metoda polega, teraz można sobie grzebać w tym kodzie dowolnie, modyfikować, jak tylko chcesz.

      Odpowiedz
  • prz-emo mówi:
    7 01 2010 o 14:33

    Co prawda nie jest to do końca dopracowane i działa tylko jeśli usuniemy ostatni link, ale mam nadzieję, że wiesz o co mi chodzi

    Odpowiedz
  • Kuras mówi:
    7 01 2010 o 15:55

    Oczywiście ale wtedy możesz usunąć z obrazka napis, oczywiście zmiana w css jest łatwiejsza.. masz rację.
    Metoda jest super ale moim zdaniem przykład jest niestosowny. Jeśli np zrobiłbyś że tekst np się podświetla i podkreśla to rozumiem, ale jak jest samo podkreślenie to moim zdaniem moja metoda jest lżejsza i bardziej prosta. Jeśli chcesz to wykorzystaj to co ci podesłałem do kolejnego tutka.

    Odpowiedz
    • prz-emo mówi:
      7 01 2010 o 20:10

      W sumie tutorial bardziej obrazowy wyszedł niż "ekonomiczny".
      Kolejny też można napisać, chociaż może po samych wypowiedziach użytkownicy dojdą sami do rozwiązania. Nie zawsze trzeba im wszystko podawać na tacy, mniejsza radość ;)

      Odpowiedz
  • Agressiva mówi:
    7 01 2010 o 20:28

    Mi osobiście tutek bardzo się podoba, o ile nieczęsto korzystam z takich rozwiązań o tyle mam nadzieję, że czytelnicy dojdą do konstruktywnych wniosków, że można to jeszcze jakoś zmodyfikować.

    I wielkie dzięki prz-emo za przygotowanie artykułu :) Jesteś kolejną bardzo pomocną osobą.

    Odpowiedz
  • gfdgd mówi:
    15 02 2010 o 12:20

    dassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

    Odpowiedz
  • Damian Gola mówi:
    27 02 2010 o 09:52

    Ciekawy tutek nie ma co, jednakże już kiedyś Agnieszko słusznie zauważyłaś, aby nie używać wartości ujemnych, dla przypomnienia podaję link do tematu na forum gdzie metodą partyzancką doszedłem do podobnego efektu :)

    http://grafikarto.pl/index.php?showtopic=2982&amp...

    Odpowiedz

    • Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Przypominamy o Konkursie Noworocznym

Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.

Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/

Zareklamuj nas :)

Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. Czytaj dalej

Polecane strony

copyright vivee.info      |       all rights reserved      |       design by water design