Artykuły:

  • data publikacji: 06.07.2009

    Menu akordeonowe z odrobiną CSS3

    kategoria: Skrypty client-side, Webmaster, XHTML/CSS autor: agressiva

    Menu akordeonowe z odrobiną CSS3

    W tym artykule dowiecie się w jaki sposób stworzyć menu akordeonowe, które funkcjonuje m.in. na stronie www.apple.com. Na tej samej zasadzie działa również moje portfolio, gdzie każda zakładka działa jak osobny dział na stronie (www.waterdesign.pl).

    demo

    Krok 1 - Struktura html naszej rozwijanej listy

    Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

    Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

    <ul>

    <li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
    <ul class="fade">
    <li>
    <div class="text">
    <ul>
    <li><a href="http://pl.wikipedia.org/wiki/RSS">RSS - Wikipedia</a></li>
     <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS - korzystanie z feedburnera</a></li>
     <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
    </ul>  
    </div>
    </li>  
    </ul>
    </li>

    </ul>
     

    Wygląd:

    Full of colours

    Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

    Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

    <div id="page">
    <ul>
                    <li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
                    <ul class="fade">
                    <li>
                            <div class="text">
            <ul>
              <li><a href="http://pl.wikipedia.org/wiki/RSS">RSS - Wikipedia</a></li>
              <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS - korzystanie z feedburnera</a></li>
              <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
            </ul>  
                            </div>
                    </li>  
                    </ul>
                    </li>
                   
                    <li class="kategoria"><div class="naglowek"><a class="link facebook" href="#">Facebook</a></div>
                    <ul class="fade">
                    <li>
                            <div class="text">
            <ul>
              <li><a href="http://www.facebook.com/">Facebook - Main Page</a></li>
              <li><a href="http://www.facebook.com/">Facebook - Rejestracja</a></li>
              <li><a href="http://www.facebook.com/pages/create.php">Facebook - Stwórz swoją stronę</a></li>
            </ul>  
                            </div>
                    </li>  
                    </ul>
                    </li>
                   
                    <li class="kategoria"><div class="naglowek"><a class="link technorati" href="#">Technorati</a></div>
                    <ul class="fade">
                    <li>
                            <div class="text">
            <ul>
              <li><a href="http://technorati.com/">Technorati - Main Page</a></li>
              <li><a href="http://technorati.com/technology/">Technorati - Technology</a></li>
              <li><a href="http://technorati.com/technology/it/">Technorati - IT</a></li>
            </ul>                              
                            </div>
                    </li>          
                    </ul>
                    </li>
                   
                    <li class="kategoria"><div class="naglowek"><a class="link twitter" href="#">Twitter</a></div>
                    <ul class="fade">
                    <li>
                            <div class="text">
            <ul>
              <li><a href="http://twitter.com/">Twitter - Main Page</a></li>
              <li><a href="https://twitter.com/signup">Twitter - Join</a></li>
              <li><a href="https://twitter.com/viveeinfo">Vivee na Twitterze</a></li>
            </ul>              
                            </div>
                    </li>  
                    </ul>
                    </li>
                   
                    <li class="kategoria"><div class="naglowek"><a class="link vimeo" href="#">Vimeo</a></div>
                    <ul class="fade">
                    <li>
                            <div class="text">
            <ul>
              <li><a href="http://vimeo.com/">Vimeo - Main Page</a></li>
              <li><a href="http://vimeo.com/join">Vimeo - Join</a></li>
              <li><a href="http://vimeo.com/upload/video">Vimeo - Upload</a></li>
            </ul>  
                            </div>
                    </li>  
                    </ul>
                    </li>          

    </ul>
    </div>
     

    Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

    Upiększanie menu, czyli struktura CSS

    Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

    * {
            padding:0;
            margin:0;
            }
           
    img {
            border:0;
            }
           
    body {
            background:#f4f3ef;
            text-align:center;
            }
           
    #page {
            width:800px;
            text-align:left;
            margin:0 auto;
            }      
           
    #page ul {
            list-style-type:none;
            width:100%;
            padding:20px 0 0 0;
            }
           
    ul ul {
            background:url(img/tlo.png);
            padding:0!important;
            }
           
    li {
            font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
            word-spacing:3px;
            vertical-align:middle;
            }
           
    div.text {
            width:780px;
            padding:10px;
            line-height:20px;
            text-align:justify;
            font:11px Tahoma, Arial, Helvetica, sans-serif;
            letter-spacing:1px;
            color:#7a7a7a;
            background:url(text.png) repeat-x top;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;    
            border-radius: 5px;            
            }      
           
    div.text p {
            margin:0 0 10px 0;
    }      

    div.text ul {
            list-style-type:none;
    }

    div.text ul li {
            font:12px Helvetica, Tahoma, Arial, Geneva, sans-serif!important;
            margin:2px 0!important;
    }

    div.text ul li a {
            color:#585858;
            font-weight:bold;
            text-decoration:none;
    }

    div.text ul li a:hover {
            color:#08a2b9;
    }
           
    .kategoria a.link {
            display:block;
            width:780px;
            padding:22px 0 5px 20px;
            font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
            font-weight:bold;
            color:#fafafa;
            text-decoration:none;  
            margin:0 0 2px 0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;    
            border-radius: 5px;    
            height:47px;
            text-shadow: 1px 1px 1px #5d5d5d;
    }      
           
    .kategoria a.link:hover {
            color:#ffffff;
            text-decoration:none;
            }      
     

    Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

    Odrobina CSS3

    CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

    • Firefox (od wersji 3 w górę)
    • Google Chrome
    • Safari
    • Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

    W menu akordeonowym zostały wykorzystane takie efekty jak:
    1. Cień pod napisem

            text-shadow: 1px 1px 1px #5d5d5d;      
     

    2. Zaokrąglone rogi

            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;    
            border-radius: 5px;    
     

    Full of colours

    Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

    jQuery

    Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
    W sekcji należy zamieścić odnośnik do jQuery:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

    <script type="text/javascript" src="js/menu.js"></script>

    Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

     $(document).ready(function() {
            $("ul.fade").not(":first").hide();
            $("a.link").click(function(){
                            $(".fade:visible").hide();
                            $(this).parent().next('.fade').fadeIn();
                            return false;
            });
     });
     

    gdzie:

    $("ul.fade).not(":first").hide();

    Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

    $(".fade:visible").hide();

    Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
    Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

    Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

    $(this).parent().next('.fade').fadeIn();

    Więcej o fade'ach przeczytać możecie w artykule: "FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu".

    Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js'a

    $("a.link").click(function(){

    podmienić click na hover:

    $("a.link").hover(function(){

    Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

    Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

    $(".kategoria a.link").fadeTo("fast", .8);                                     
    $(".kategoria a.link").hover(function(){
            $(this).fadeTo("fast", 1);
            },function(){
            $(this).fadeTo("fast", .8);
    });    
     

    Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

     $(document).ready(function() {
            $("ul.fade").not(":first").hide();
            $("a.link").click(function(){
                            $(".fade:visible").hide();
                            $(this).parent().next('.fade').fadeIn();
                            return false;
            });

    $(".kategoria a.link").fadeTo("fast", .8);                                     
    $(".kategoria a.link").hover(function(){
            $(this).fadeTo("fast", 1);
            },function(){
            $(this).fadeTo("fast", .8);
    });

    });
     

    W taki sposób przestawia się tworzenie akoreonowego menu,
    mamy nadzieje, że artykuł ten okaże się dla Was pomocny.

    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.

    41 Responses to “Menu akordeonowe z odrobiną CSS3”

    1. Burger pisze:
      7 07 2009 o 02:43

      Bardzo fajnie wytłumaczone. Jest gdzie na necie opisany CSS3 po polsku?

      Odpowiedz
    2. korek pisze:
      7 07 2009 o 09:08

      Bardzo fajna tutka , ale dużo wysiłku by nie kosztowało dodanie dodania hacka dla ie dla png.

      I tu mam zawsze dylemat czy warto używać css3 które działa tylko w dwóch przeglądarce, co prawda tutka bardzo fajna ale przez to jest bez użyteczna. Nie chce być źle zrozumiany tylko chciał bym znac wasze zdanie czy warto w ogóle stosować w projektach css3

      bo na pewno warto się bawić i uczyć jak dojdzie do css3 :)

      Odpowiedz
    3. agressiva pisze:
      7 07 2009 o 09:31

      Po 1. to był tutorial na menu akordeonowe a nie zabawy z IE6 – jak ktoś ma z tym problemy to zapraszam tutaj – http://grafikarto.pl/Przezroczysto-t1517.html – Maciek kiedys bardzo fajnie opisał jak korzystac z przezroczystosci (może będzie trzeba pomyślec nad przeniesieniem tego artykulu na vivee).

      Po 2. Tak stosuje CSS3 tam gdzie to nie przeszkadza i nie jest aż tak bardzo potrzebne, a z drugiej strony wyglada ciekawie pod niektórymi przeglądarkami. U siebie na blogu mam uzyte zaokrąglanie rogów i cień pod tekstem w tytule. Zarówno bez tych bajerów jak i z strona wygląda ok.

      Odpowiedz
    4. JaRo pisze:
      7 07 2009 o 12:42

      w css3 mogę wreszcie używać białego cienia ^^ bajera.

      Odpowiedz
    5. agressiva pisze:
      7 07 2009 o 20:58

      Wiem, że stron w j. angielskim się co niektórzy boją i unikają jak ognia, ale najlepszym źródłem informacji o CSS3 jest http://www.css3.info/

      GrovMan wg mnie zapomniales u siebie o jednej waznej rzeczy wymieniajac zalety CSS3 – Multiple backgrounds – jak dla mnie to jedna z najbardziej pozytecznych rzeczy. Teraz pozostaje tylko czekac na obluge tych wszystkich uzytecznych funkcji przez najwazniejsze przegladarki.

      Odpowiedz
    6. eRIZ pisze:
      8 07 2009 o 01:30

      Trochę nie rozumiem, po co tyle elementów w kodzie – skoro artykuł oparty w dużej mierze o CSS3, to dlaczego nie korzystacie z dobrodziejstw generated content?

      Odpowiedz
    7. Nickel pisze:
      8 07 2009 o 16:56

      Akurat na dniach będę musiał wykonać podobne menu, więc na pewno przyspieszy to moją pracę – dzięki! :)

      Żeby zaokrąglone rogi były niezależne od przeglądarki można użyć malutkiego pluginu do jQuery: http://www.methvin.com/jquery/jq-corner-demo.html

      A co do CSS3 to wszystko fajnie, ale cóż mi po super zaokrąglonych rogach jeśli obecnie po wyjściu IE8 nadal muszę kodować tak aby wszystko wyświetlało się poprawnie w IE6? Jeszcze duuużo czasu upłynie zanim będziemy mogli swobodnie wykorzystywać takie nowinki… niestety :/

      Odpowiedz
    8. agressiva pisze:
      8 07 2009 o 17:18

      Cieszę się, że tutek się przyda i dzięki za linka do plugina – nie szukałam wcześniej czegos takiego stąd nie znałam.

      Ja specjalnie się IE nie przejmuje – ważne że nie rozlatuje się wszystko we wszystkie strony i da się przeczytać :) Istotniejsze są dla mnie pozostałe, bardziej rozwinięte technologicznie przegladarki.

      Odpowiedz
    9. SpeX pisze:
      8 07 2009 o 23:34

      Nie wiem czemu ale ja pod FF3.0 nie widzę tych cieni. A z tego co mi się zdaje to powinienem :/

      I trafił mi się mały error tego menu:P
      http://img2.pict.com/4a/8b/1a/1098670/0/800/menu2520akordeonowe.png

      Odpowiedz
    10. agressiva pisze:
      8 07 2009 o 23:57

      wiadomo dlaczego nie widzisz – FF nie obsługuje cieni pod napisami…

      FF masz zmulone i niedoczytał Ci JSa.

      Odpowiedz
    11. SpeX pisze:
      9 07 2009 o 02:29

      Możliwe, mam pełno otwartych zakładek TODO i ich nie ubywa :/

      Odpowiedz
    12. pafeu pisze:
      10 07 2009 o 11:39

      Bardzo mi się podoba efekt końcowy, na pewno się przyda, dzięki ;-)

      Odpowiedz
    13. dawid7236 pisze:
      13 07 2009 o 20:25

      FF nie obsługuje cieni :/

      Odpowiedz
    14. agressiva pisze:
      13 07 2009 o 22:03

      dawid7236 – owszem była o tym mowa 3 linijki wyżej :D
      Ponoć w wersji 3.5 sytuacja ma wyglądać inaczej.

      Odpowiedz
    15. newbie pisze:
      17 07 2009 o 12:51

      Super. Czekam na więcej takich tutoriali HTML CSS (;

      Odpowiedz
    16. Siostra Nocy pisze:
      17 07 2009 o 15:47

      Dziękuję. :-)

      Odpowiedz
    17. Szymon pisze:
      24 07 2009 o 14:01

      Bardzo fajne porady :) dorzucam do RSSów :)

      Odpowiedz
    18. Suarez pisze:
      7 08 2009 o 09:32

      Przepraszam, mam pytanie:
      mam wrażenie, że czcionki są tak jakby wygładzone – jak takie coś uzyskać?

      Odpowiedz
      • agressiva pisze:
        7 08 2009 o 10:46

        Wygładzenie czcionek można uzyskac poprzed taką opcje w przegladarce, jak na razie maja ja Safari i IE8, od strony CSS nie można takiego efektu uzyskac. Takze moze masz ktoras z tych przegladarek albo jest to złudzenie optyczne wywołane cieniem pod tekstem.

        Odpowiedz
    19. online pisze:
      22 12 2009 o 20:19

      bardzo ciekawe, dzieki

      Odpowiedz
    20. matiz pisze:
      29 01 2010 o 20:27

      dlaczego jak chciałbym aby element który się nie chowa po naciśnięciu też otwierał jakiś link to to nie działa ??

      Odpowiedz
    21. rokicza pisze:
      6 03 2010 o 14:16

      ff obsługuje cienie :)

      ale mam problem, bo nie chce mi wyjść pasek tytułowy podgrupy menu i mam to w kolorze tła strony o.o
      i wyśrodkowanie strony uciekło

      //bardzo mi się ten tutek przydał :)

      Odpowiedz
    22. Bla pisze:
      22 03 2010 o 10:21

      Witam
      MOze ktos mi doradzic jak zrobic by po wybraniu czegos np "FACEBOOK" i kliknieciu wybrana pozycja zostala podswietlona nawet po zjechaniu z niej myszka ? Tak by aktywne MENU bylo wyroznione…

      dzieki serdeczne za pomoc – tutorial KLASA !

      Odpowiedz
    23. mybber pisze:
      11 05 2010 o 18:05

      Da radę to jakoś przerobić, żeby po dopiero po kliknięciu na jakąś zakładkę się wysuwało, a nie tak, że po wejściu na stronę jest już jedna zakładka rozwinięta?

      Odpowiedz
      • Agressiva pisze:
        13 05 2010 o 06:31

        Spróbuj ze skryptu usunąć linijkę odpowiedzialną za to, że pierwsza zakładka nie jest schowana czyli : $("ul.fade").not(":first").hide();

        Odpowiedz
        • Agressiva pisze:
          13 05 2010 o 07:28

          Albo jeszcze inaczej, to co podałam wyżej nie do końca jest ok.

          Zmień linijkę $("ul.fade").not(":first").hide(); na $("ul.fade").hide(); :)

          Odpowiedz
    24. Dante pisze:
      20 05 2010 o 11:39

      Witam, dzięki za artykuł :)
      Mam pytanie, jak zrobić podświetlenie aktywnego menu? tzn, klikam np w facebook, rozwija się menu i chcę żeby podświetlała się "belka" z napisem facebook :)

      Z góry dziękuję za odpowiedź i pozdrawiam

      Odpowiedz
    25. Tomek pisze:
      24 06 2010 o 23:52

      Witam, a czy jest możliwość wstawienie tego menu w widget wordpressa np. jako rozwijane menu restauracji?

      Odpowiedz
    26. blaze pisze:
      5 08 2010 o 10:47

      Witam, a jak zrobić żeby np. 3 zakładka była otworzona albo czwarta a nie pierwsza? :) pozdrawiam.

      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.
  • Wieczór z Open Source
  • 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

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

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

Polecane strony

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