Artykuły:

Reklama na blogach - Blogvertising.pl
  • 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.

    34 Responses to “Menu akordeonowe z odrobiną CSS3”

    1. Burger mówi:
      7 07 2009 o 02:43

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

      Odpowiedz
    2. korek mówi:
      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 mówi:
      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 mówi:
      7 07 2009 o 12:42

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

      Odpowiedz
    5. agressiva mówi:
      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 mówi:
      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
      • agressiva mówi:
        8 07 2009 o 08:52

        No właśnie sensem artykułu jest “jak zrobic menu akordeonowe”, css3 to zaledwie drobny sygnał… “odrobina”…

        Odpowiedz
        • JaRo mówi:
          8 07 2009 o 10:07

          Szukał zaczepki ale nie wyszło :(

          Odpowiedz
        • eRIZ mówi:
          8 07 2009 o 12:32

          Ale generated content już istnieje od bodajże CSS 2.1… Mogłaś skorzystać z listy definicyjnej, mniej kodu by było…

          ~JaRo, jeśli wyszukiwanie słabych punktów danego rozwiązania nazywasz szukaniem zaczepki, to współczuję Twoim klientom…

          Odpowiedz
    7. Nickel mówi:
      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 mówi:
      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 mówi:
      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 mówi:
      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 mówi:
      9 07 2009 o 02:29

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

      Odpowiedz
    12. pafeu mówi:
      10 07 2009 o 11:39

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

      Odpowiedz
    13. dawid7236 mówi:
      13 07 2009 o 20:25

      FF nie obsługuje cieni :/

      Odpowiedz
    14. agressiva mówi:
      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 mówi:
      17 07 2009 o 12:51

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

      Odpowiedz
    16. Siostra Nocy mówi:
      17 07 2009 o 15:47

      Dziękuję. :-)

      Odpowiedz
    17. Szymon mówi:
      24 07 2009 o 14:01

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

      Odpowiedz
    18. Suarez mówi:
      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 mówi:
        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 mówi:
      22 12 2009 o 20:19

      bardzo ciekawe, dzieki

      Odpowiedz
    20. matiz mówi:
      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 mówi:
      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

    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