[Tutorial] Ciekawe rozwijane menu w CSS!


(system) #1

Mój drugi i zarazem ostatni dziś tutek.

Teraz pokaże Wam, jak zrobić ciekawe rozwijane menu w css.

Kolorystyka podobna do wcześniejszego mojego menu.

Ale oczywiście, ten trick nie chodzi na IE...

Jak zwykle, znowu robimy listę za pomocą div'a, ul'i i il'li :stuck_out_tongue: :

Teraz style:

Wynik: http://cyg.ovh.org/tutoriale/css_menu_rozwijane.htm


(Monczkin) #2

A nie lepiej go dołaczyć do tamtego tematu ??

Nie ma sensu pisać 100 tematów o jednej rzeczy


(system) #3

No można. :mrgreen:

Ale i tak chyba więcej tutków o menu css'owym nie zrobie.


(Kulpek) #4

Ja bym jeszcze dodal linie odstepu pod napisem "menu". Wg mnie wygladaloby lepiej :wink:


(Sebidlo) #5

Witam!

Temat ciekawy.

Szukam wielopoziomowego menu tylko na css a w spotykanych w necie Tutorialach zawsze zamieszana jest Jawa. Szkoda, że przykładu nie da się zobaczyć .... Tródno stwierdzić czy znalazłem to czego usilnie szukam ... bo nie udało mi się tego rozwijania zobaczyć po wklejeniu cytatów do mojego kodu :frowning:

Pozdrawiam

Może uaktywnisz ponownie przykład ?


(system) #6

Zapomniałem, że wywaliłem go z serwera, ale już przykład działa.

Jak będę miał trochę czasu to sporóbuje zrobić, aby pod IE chodziło.

Złączono Posta : 05.04.2007 (Czw) 11:23

Powracając na stare śmiecie, powiem, że to menu działa dobrze pod IE7 :smiley:


(Admin) #7

Witam. Po wielu godzinach poszukiwań :slight_smile: znalazłem nareszcie normalnie i prosto opisany sposób wykonania menu w CSS. Ale mam pytanie. Jak je przerobić by to menu rozwijało się do góry a nie do dołu. Chcę na stronie internetowej w dolnej części okna przeglądarki umieścić takie menu i było by dobrze by rozwijało się do góry. Proszę o pomoc w tej sprawie.


(system) #9

Dodaj do style.css

float: left;

clear: none;

w #menu

Takie coś na szybkiego skombinowałem...


(Macieke11) #11

Dobry poradnik, ale takich poradników w necie jest dużo


(4dr14n) #12

Hej, fajny ten tutorial - wreszcie można nauczyć się robić menu - i to jeszcze rozwijalne :smiley: Wielkie dzięki za tego tutka :wink:

A jeszcze jakby ktoś tu zaglądał, to chciałbym tylko spytać, jak zrobić dalszą część menu - tzn obok tego co jest powstawiać kolejne kwadraty tego menu, bo tu jest tylko jeden?? :smiley:

Aha, i jeszcze przy okazji powiem, że działa mi to menu zarówno w Mozilli, jak i w explorerze :wink:

Pozdrawiam


(Emiloski3) #13

nie rozumiem! co rozumiesz przez "nasza cała strona" w stylu?? co tu mam dać?? nic nie zmieniać??? czy dać linka do strony głównej?? niewiem czy odpowiesz po przecież napisałeś to 4 lata temu xD ale może ktoś inny?? wytłumaczcie mi

-- Dodane 10.05.2010 (Pn) 20:10 --

sry!! zrobiłem ze siebie kompletnie zielonego nooba xD już wiem o co chodzi xD


(Jumbetka) #14

Witam,

mam taki problem, że zrobilam takie menu tylko że poziome i chcialabym żeby całe menu wyswietlało się na srodku strony, niezależnie od przeglądarki.

Proszę o pomoc jak to zrobić ?

pozdr.

Justyna


(Ymplozer) #15

Hmm... a jak zrobic zeby to menu nie przesuwalo calego tekstu, tylko pojawialo sie ponad nim? Bo po rozwinieciu menu przesuwa sie cala zawartosc strony w dol, a chcialbym zeby zostala na swoim miejscu i zostala przyslonieta lista, ktora sie pojawila.


(Kubafilinger) #16

Musisz poprostu w #menu:hover zamienic w height 100% na auto:

menu:hover { /* najechane menu */

width: 150px; /* szerokość */

height: auto; } /*wysokość (zmienia sią automatycznie) */

:slight_smile:


(Donkey Shot) #17

Witam. Mnie z kolei zależałoby, żeby takie menu rozwijało się tylko po kliknięciu na główną kategorię, no i analogicznie zwijało. Da się to robić?


(Wkroczek) #18

Witam,

zrobiłem jak pisałeś, niestety bez zmian, strona dalej się rozjeżdża :frowning: prosiłbym o jakaś radę.


(system) #19

@Cygan

A zrobisz mi tak, żeby.to się nie rozwijało?

żeby już takie było, a jak ktoś chce to może sobie zwinąć menu.

I żeby za MENU był ciemniejszy odcień szarego (ale to już sam zrobię :P)


(Drobok) #20

@2up podaj kod całej witryny (najlepiej link do niej)

@up Chcesz mieć zwykłe to po prostu nie rób podmenu / wywal css dla niech i tyle :slight_smile:


(system) #21

działa :smiley:


(lutum2012) #22

Ja sprawdziłem i na IE działa