Artykuły:

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

    Rozwijane menu na szybko

    kategoria: XHTML/CSS autor: palmiak

    Rozwijane menu na szybko

    Nie wiem jak Wy, ale ja nigdy nie lubiłem robić rozwijanych menu. Niestety wielu klientom się takie coś podoba i ciężko jest ich przekonać, że rozwijane menu na stronie to nie jest szczyt wygody dla usera (szczególnie gdy wojuje on za pomocą jakiegoś touchpada). Na szczęście komuś się chciało i stworzył tzw. "CSS Drop-Down Menu Framework", dzięki któremu stworzenie każdego kolejnego menu zajmie nam kilka chwil.

    demo

    Nie będę już wnikał w fakt nadużywania ostatnio słowa framework, bo nie o to nam chodzi. CSS Drop-Down Menu Framework jest to zestaw styli css oraz skryptów js (dla IE 6), dzięki którym nasza rola ograniczy się do ustalenia wyglądu.

    Zróbmy sobie menu

    Żeby pokazać Wam jak to działa zrobimy sobie najnormalniejsze na świecie menu poziome. Menu będzie oparte na listach nieuporządkowanych:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">

    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Rozwijane menu - vivee.info</title>
    </head>
    <body>
    <ul id="navi">
            <li><a href="#">Aktualności</a>
                    <ul>
                            <li><a href="#">Polska</a></li>
                            <li><a href="#">Świat</a></li>
                    </ul>
            </li>
            <li><a href="#">Tutoriale</a>
                    <ul>
                            <li><a href="#">Webdesign</a></li>
                            <li><a href="#">Css</a></li>
                            <li><a href="#">Fotografie</a></li>
                            <li><a href="#">jquery</a></li>
                    </ul>
            </li>
            <li><a href="#">Inspiracje</a>
                    <ul>
                            <li><a href="#">ikony</a></li>
                            <li><a href="#">strony</a></li>
                    </ul>
            </li>
    </ul>
    </body>
    </html>

    Tak wygląda nasza baza, teraz będziemy ją rozbudowywać. Zacznijmy rozbudowę od pobrania archiwum z http://www.lwis.net/free-css-drop-down-menu/.

    Z archiwum przegrajmy do katalogu w którym tworzymy naszą stronę skrypty js (ja wrzuciłem te pliki do katalogu js) oraz styl do naszego typu menu (dropdown.css, który wylądował w katalogu css). Teraz poprawmy troszkę to nasz html. Sekcja <head> powinna wyglądać tak:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Rozwijane menu - vivee.info</title>
            <link href="css/dropdown.css" media="all" rel="stylesheet" type="text/css" />
            <!--[if lt IE 7]>
                    <script type="text/javascript" src="js/jquery.js"></script>
                    <script type="text/javascript" src="js/jquery.dropdown.js"></script>
            <![endif]-->

    Musimy jeszcze dodać do <ul> odpowiednią klasę:

    <ul id="navi" class="dropdown dropdown-horizontal">

    I już - działa. Teraz pozostaje to upiększyć.

    Tworzymy więc w katalogu css plik menu-style.css, a do niego wpisujemy np.:

    * {
            padding:0;
            margin:0;
            }

    #navi {
            font:11px verdana, arial, sans;
            background:#252525;
    }

    #navi li a {
            display:block;
            color:white;
            text-decoration:none;
            border-right:1px #4c4c4c solid;
            padding:10px 20px;
    }

    #navi li a:hover,#navi li a.hover  {
            background:#00ccff;
    }

    #navi li ul {
            background:#4d4d4d;
    }

    #navi li li a {
            width:150px;
            border:0;
            background:#4d4d4d;
    }

    #navi li li a:hover {
            background:#7b7b7b;
    }

    I w sekcji <head> pozostaje dopisać<link href="css/menu-style.css" media="all" rel="stylesheet" type="text/css" />.

    No i skończyliśmy. Proste menu na szybko. Wygląda ono następująco.

    A teraz spróbujmy je zmienić w troszkę inne.

    Z archiwum skryptu do naszego katalogu css zgrywamy plik dropdown.linear.css oraz zamieniamy <link href="css/dropdown.css" media="all" rel="stylesheet" type="text/css" /> na <link href="css/dropdown.linear.css" media="all" rel="stylesheet" type="text/css" />.

    Następnie class="dropdown dropdown-horizontal" zamieniamy na class="dropdown dropdown-linear".

    Ostatnią zmianą jest wywalenie z menu-style.css linijki width:150px; .

    I koniec. Spójrzcie sobie na demo

    Podsumowanie

    Za pomocą "CSS Drop-Down Menu Framework" możemy stworzyć jeszcze kilka rodzajów menu. Najlepiej spojrzeć sobie w załączone przykłady. Osobiście sam framework bardzo mi się spodobał. Zaoszczędzi mi masę czasu, który zwykle poświęcałem na rzeźbienie takich menu.

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop
  • 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.

    25 Responses to “Rozwijane menu na szybko”

    1. loozaque mówi:

      Generalnie lipa. Nie działa w IE6. A jak ktoś napisze, że nie musi działać w IE6 to niech lepiej nie robi stron. Pracuję w agencji interaktywnej i wiem, że nie ma możliwości, aby strona nie działała poprawnie we wszystkich jeszcze używanych przeglądarkach.

      Poprawna wersja na CSSie:
      http://www.cssplay.co.uk/menus/simple_vertical.html

    2. loozaque mówi:

      Dodam jeszcze, że nawet dla IE6 nie trzeba używać JS, i kod się waliduje.

    3. agressiva mówi:

      Równiez pracuję w agencji interaktywnej (co nie jest żadnym wyznacznikiem działania tego “frameworka”) i to narzędzie świetnie działa – w kazdej przegladarce (nawet w IE 6). Kwestia podejścia i poprawnego zastosowania :)

    4. palmiak mówi:

      Fakt problemów z IE6 jest bardziej moim błędem niż samego systemu. Przyznam, że IE6 nie posiadam i nie posiadałem możliwości sprawdzenia. Postaram się to poprawić.

      Co do metody z cssplay jest ona o tyle upierdliwa, że trzeba dopisywać dodatkowe znaczniki.

      Ja jestem za podejściem, że stronę powinno dać się przeczytać we wszystkich przeglądarkach. I to jest najważniejsza rzecz wg. mnie. Swoją drogą zastanawia mnie czy dbałością webmasterów o to, żeby strona w IE6 jednak wyświetlała się tak nie zrobili oni niedźwiedziej przysługi userom trzymając przy życiu trupa w postaci IE6. Może naprawdę było się trzeba gdzieś po drodze masowo wypiąć i stwierdzić “sorry nie działa, zainstaluj coś nowszego”. Bo przez te wszystkie webmasterskie gimnastyki z IE6 userzy żyją w przeświadczeniu, że mają fajną przeglądarkę, bo wszystko wygląda tak samo i jest cool. A tak mże trzeba ich było od jakiegoś czasu już informować komunikatem: “Stronę mżesz przeczytać, ale jeżeli chcesz, żeby wyglądała tak jak powinna zainstaluj Operę, Fx, Safari czy IE7″.

    5. agressiva mówi:

      Z jednej strony takie komunikaty to czyste buractwo :) Ale nie da się ukryć, że IE 6 powinno przestac istnieć i nie powinno być uzywane na skale masową. Jednak ciężko będzie statystycznemu internaucie, który nie zna się na tym wytłumaczyć, że IE 6 to bardzo stara przeglądarka, która odchodzi do lamusa. Widze to na przykładzie klientów firmy w której pracuje, niektórzy ludzie nawet nie wiedzieli, że jest coś poza IE. Na szczęście jest masa też takich ludzi, którzy mają pojęcie o tym co się dzieje do okołoa nich a tym bardziej wiedzą co się dzieje ze stronami.

      Osobiście za rozwijanym menu nie przepadam, jednak kiedy klient sie uprze to niestety trzeba coś takiego zastosować. Jezeli webmaster potrafi dostosować wyżej przedstawiony framework do swoich potrzeb (czyli nie tylko ostylować wygląd, ale też pogrzebac w innych plikach które są tam uzywane) to nie bedzie miał zadnego problermu. U siebie zastosowałam już w dwóch projektach i jestem zadowolona z rezultatów, kilka minut i menu gotowe.

    6. loozaque mówi:

      IE6 jest, w wielu firmach userzy mają zablokowana możliwość aktualizacji, a tym bardziej instalowania alternatywnych przeglądarek. Nie ma dla klienta AI znaczenia czy IE6 powinno być wspierane czy nie – dla niego jest jedna rzecz jasna – każdy potencjalny klient musi zobaczyć jego ofertę.

      JS trzeba jak najmniej stosować, że względu na wolne komputery… ile razy FF zajmuje w pamięci podręcznej ponad 300mb? jak coś da się zrobić bez JS to się robi bez JS.

      Inną kwestią jest to, że jak ktoś najedzie na menu podczas ładowania dużej strony (nie doczytają się JS, powyższy przykład oczywiście jest lekki, i tego efektu się nie zauważy) to nie zobaczy podmenu…

    7. Hellix mówi:

      Wszystko fajnie ale – jak to cudo ustawić na środku strony?

    8. agressiva mówi:

      wszystkie pozycje tego menu funkcjonują na floatach czyli lecą do lewej strony. Teoretycznie nie można tego ustawić poprzez ten fakt na środku.
      Jest jedno wyjście, jeżeli jesteś pewien, że ilość pozycji w menu głównym będzie stała to nadaj ul głównemu stala szerokosc i wypozycjonuj menu tak aby było mnej wiecej na środku strony.

    9. gakusei mówi:

      jest jeden błąd, wlasciwie nie powinno to byc jakąś zaporą dla osoby robiącej menu ale zapomniano o dodaniu id=”navi” w w miejscu
      “Musimy jeszcze dodać do odpowiednią klasę:

      I już – działa. Teraz pozostaje to upiększyć.”

      pozdr

    10. palmiak mówi:

      Dzięki wielkie za dostrzeżenie błędu. Nawet w kodzie dema jest to id=’navi’.

    11. Geetzeq mówi:

      Podpowiedzcie dlaczego w FF menu się zacina, tzn jedno rozwinięte menu zostaje widoczne na ekranie gdy już przeglądam kolejne. Dzieje się tak tylko pod FF, a pod Op i IE problem nie występuje. Pozdrowionka

    12. agressiva mówi:

      Tego gotowca do rozwijanego menu uzywam od bardzo długiego czasu , nawet dziś przy kolejnym projekcie go wdrożyłam i nie zauważyłam u siebie efektu zacinania pod FX (wersja 3.0.8).
      Nie masz przypadkiem odładowanego FXa jakimiś pluginami? Dodatkowe gadzety pod FX maja zdolności zamulające tą przegladarkę.

    13. Geetzeq mówi:

      Zauważyłem że menu nie zanika jeśli jest rozwijane nad tzn jeśli z menu kursorem zjedziesz na pole tekstowe to menu zostaje. Sprawdźcie sami na slugusek.pl gdy przeglądasz dodane firmy jest tam textarea . Pozdrowionka

    14. agressiva mówi:

      Nie wiem jak Ci to w tej chwili udowodnić, ale u mnie pod wszystkimi przeglądarkami w tym FX 3.0.8 jest ok, nic nie zostaje… Wszystko fajnie i ładnie śmiga… :)
      Osobiście nie mam zainstalowanej żadnej wtyczki do FX, która moglaby ją zamulać – polecam Ci sprawdzic to na czystej świeżo zainstalowanej przeglądarce na innym kompie.

    15. palmiak mówi:

      A przyznam rację. Raz na skugusku na podstronie z textarea udało mi się uzyskać opisaną sytuację. Przyznam, że nie mam pojęcia czemu się tak dzieje. Swoją drogą dziwne jest, że stało się tylko raz, gdy po raz pierwszy wyświetliłem menu.

      Ciekawe jest też to, że w momencie gdy tutek był pisany to pamiętam, że pod fx menu chodziło “żwawiej”. Teraz zęsto przy pierwszym pokazaniu chodzi troszkę bardziej ociężale (co ciekawe nie wszędzie).

    16. Kazon mówi:

      Witam!
      Może trochę offtopic ale muszę napisać menu rozwijane w pionie z zaznaczeniem aktualnie odwiedzanego linka,np. takie jak tu: http://www.rojswiatel.pl . Szukałem rozwiązań w oparciu o mootools i jQuery…. nie znalazłem nic na ten temat. Czy możecie mi podać jakąś wskazówkę jak najlepiej się za to zabrać? Dodam , że w js dopiero raczkuję a nie widzę innej mozliwości ja “oskryptowanie” takiego menu. Z góry dziękuje za wszelkie wskazówki.

    17. palmiak mówi:

      Wyjść jest kilka. Możesz do tego podejść od strony php (czy innego języka skryptowego). Wtedy po prostu sprawdzasz np. ID strony i jeżeli zgadza się ze stroną aktywną to skrypt dopisuje class=”active” (a w tym momencie za pomocą stylu zmieniasz wygląd).

      Jeżeli bardzo chcesz w js się bawić, to jedynym problem jest to, żeby po przeładowaniu skrypt pamiętał co ma być zaznaczone. Czyli musisz użyć jakiegoś cookie i już.

      Jak będziesz miał problemy daj znać.

    18. Kazon mówi:

      Dziękuję za cenne informacje. Trochę na ten temat myślałem i przypomniałem sobie, że dosyć dawno temu miałem okazję generować takie menu za pomocą programu “Xara 3D”. Z tego co pamiętam, to było to dosyć proste rozwiązanie, skrypcik js po zdarzeniu onclick podmieniał grafikę w linku, który został kliknięty. Co prawda skrypt ten nie sprawdzał czy dany link jest aktywny ale mi to nie przeszkadza bo żaden z linków nie będzie generowany. No cóż, pozostaje mi znaleźć demo tego programu i poobserwować co za skrypt zostanie wygenerowany. Jeszcze raz dziękuję i pozdrawiam.

    19. Kazon mówi:

      Oczywiście pomyliłem nazwę programu :) Menu można wygenerować za pomocą Xara Webstyle :)

    20. m@ilman mówi:

      Mam problem. Gdy tworzę zwykłą stronę w html’u ten sposób jest idealny, jednak mam problem z implementacją takowego menu do skórki WordPress’a.

      Czy jest coś o czym nie wiem?

      Dodam, że w Operze wszystko chodzi idealnie, ale w IE menu się wyświetla tylko główna linijka (pod menu sie nie rozwija).

    21. palmiak mówi:

      A link do jQuery na pewno masz dobry? ;)

    22. agressiva mówi:

      Na pewno ścieżka do plików załaczanych przy dropdown menu jest zla,
      m@ilman musial zapomniec o < ?php bloginfo('template_url'); ?> bez tego zawsze będzie klapa :) kłaniaja sie template tagi
      Jak widac u mnie wszystko śmiga http://agressiva.poprostuja.pl/

    23. m@ilman mówi:

      Ścieżki są właściwe – chyba ze 100 razy już sprawdzałem. Wydaje mi się, że problem tkwi gdzieś w style.css, poniważ gdy zaimplementowałem menu do orginalnego pliku stylu na którym opierałem własny, to wszystko śmiga. Natomiast, gdy próbuję uruchomić menu w stylu po moich lekkich modyfkacjach, to nie działa ono w IE.

    24. m@ilman mówi:

      Mój problem rozstał rozwiązany – okazało się, że głupi IE ma jakieś tryby zgodności i inne bzdety. Uruchomiłem narzędzie dla developerów (F12) u stawiłem na IE8, przy IE7 niestety menu nadal sie rozjeżdża, a dokładniej, nie da się kliknąć pozycji drugiej i kolejnych w liście – menu znika po przejechaniu pierwszej pozycji.

    25. m@ilman mówi:

      Proszę jednak o pomoc, ponieważ ze względu na głupi IE7 chyba osiwieje, proszę powiedzcie mi co w stylu jest nie tak, chciałbym, żeby strona wyglądała tak samo w Operze, Chromie, Mozilli czy IE8 i 7, itd.

      Dodam, że chcę później z tego zrobić motym do WP, ale jak uda mi się z tym html’em to już chyba jakoś pójdzie.

      Proszę o moc – to adres stronki: http://ratunku-vivee.yoyo.pl

    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