Komentarze do: Rozwijane menu z wykorzystaniem CSS3

Autor: Krzysztof

Krzysztof — Fri, 25 Jan 2019 14:55:43 +0000

Mam takie pytanie. Proszę napisać o zrobić aby po najechaniu kursorem na menu rozwijane pozostał biały kolor menu głównego a nie zmieniał koloru np. Informacje.

Autor: Salvation

Salvation — Thu, 18 Feb 2016 19:42:00 +0000

To nie zadziała:
/*ANIMACJA – tylko CSS3*/
#menu *:hover {transition: 0.3s ease-in;}

transition dodaje się do elementów bez hover

Autor: Michał Kortas

Michał Kortas — Mon, 18 Jan 2016 14:22:00 +0000

W odpowiedzi do Pat. Jeśli coś da się szybko wytłumaczyć to odpowiadam w komentarzu. Jeśli, potrzeba więcej miejsca, np. na kod to lepszym miejscem jest forum. Żadne pytania nie są głupie :)

Autor: Pat

Pat — Mon, 18 Jan 2016 14:14:00 +0000

W odpowiedzi do Michał Kortas. czemu... wszyscy uzyskali odpowiedzi na swoje głupie pytania..

Autor: Emil Doliński

Emil Doliński — Fri, 10 Oct 2014 09:51:00 +0000

Witam, nie mogę wejść na forum, pojawia się błąd: 1054 – Nieznana kolumna 'requireReset’ w where clause SQL=SELECT id,username,password FROM j_users WHERE username = 'Zegarmistrz’ AND requireReset = 0

Autor: Emil Doliński

Emil Doliński — Thu, 09 Oct 2014 10:28:00 +0000

Świetny artykuł. Menu wykorzystamy na naszej stronie. Pozdrawiam.

Autor: Michał Kortas

Michał Kortas — Tue, 18 Mar 2014 09:32:00 +0000

Najlepiej przypisać mu odpowiednią klasę, a potem sformatować ją za pomocą CSS.

Autor: pietrzek

pietrzek — Wed, 12 Mar 2014 22:54:00 +0000

Swietne menu, dziala elegancko. Jak zrobic zeby okreslony przycisk uznany byl za aktywny/wcisniety? bo chcialem mu przypisac inny kolor

Autor: Piotrek

Piotrek — Tue, 04 Feb 2014 18:00:00 +0000

Witam, jak można przesunac w lewo drugi poziom menu. chodzi o to ze jak najezdzam na menu to co sie wysuwa jest rowno z lewa strona gory a chcialbym zeby wysunieta czesc(razem z tlem ) byla wyposrodkowana pod gorna.

Autor: Marcin

Marcin — Wed, 30 Oct 2013 12:10:00 +0000

w css menu width ustawiłem na 100%. Tekst jest od lewej a jak zrobić żeby był wyśrodkowany ?

Autor: Michał Kortas

Michał Kortas — Mon, 21 Oct 2013 17:39:00 +0000

W odpowiedzi do Loki. Można. Proszę założyć odpowiedni wątek na naszym forum dla webmasterów, a na pewno pomożemy.

Autor: Loki

Loki — Mon, 21 Oct 2013 17:28:00 +0000

A czy przy użyciu CSS3 można uzyskać efekt animacj gdy pojawia się drugi poziom menu?

Autor: Michał Kortas

Michał Kortas — Sat, 11 May 2013 20:25:00 +0000

W odpowiedzi do Orches. Dokładnie. W przykładzie nie ma innych elementów, które zmieniają stan, dlatego mogłem użyć :hover dla wszystkich (*), ale na innych stronach spowoduje to dodanie efektu przejścia dla wszystkiego co może zmieniać swoje stany po najechaniu kursorem. Dziękuję za komentarz. Kod w artykule poprawiam.

Autor: Orches

Orches — Fri, 10 May 2013 20:59:00 +0000

/*ANIMACJA – tylko CSS3*/

*:hover {-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
Przed *:hover polecam wpisać #menu. Na Google Chrome niezłe kwiatki mi się działy. Tekst przy powiększaniu (artykułu!) robił się jakby animowany – „pływał”, żeby ustawić się do powiększenia.

Autor: Michał Kortas

Michał Kortas — Thu, 28 Mar 2013 19:53:00 +0000

W odpowiedzi do Kamil K.. Płynne rozwijanie bez CSS? Chociażby przy użyciu jQuery, ale to trochę mija się z celem, bo menu ma wykorzystywać tylko i wyłącznie CSS3.

Autor: Kamil K.

Kamil K. — Thu, 28 Mar 2013 19:03:00 +0000

Ja ostatnio próbowałem, lecz nie wiem. Da radę zrobić płynnie rozwijane menu bez CSS? :)

Autor: Michał Kortas

Michał Kortas — Wed, 27 Mar 2013 16:18:00 +0000

W odpowiedzi do Kinga. Usuń margin: 0 auto; z elementu #menu.

Autor: Kinga

Kinga — Wed, 27 Mar 2013 16:10:00 +0000

Witam!Co mam usunąc,aby menu nie było wyśrodkowane?

Autor: Michał Kortas

Michał Kortas — Wed, 30 Jan 2013 12:27:00 +0000

W odpowiedzi do jamo. Proszę założyć odpowiedni temat na naszym forum webmasterskim. Tam udzielamy wszelkiej pomocy na problemy związane z zagadnieniami poruszanymi w artykułach.

Autor: jamo

jamo — Wed, 30 Jan 2013 11:14:00 +0000

Witam a jak zrobić aby to menu nie było przykrywane przez inne elementy na stronie?

Autor: Michał Kortas

Michał Kortas — Thu, 27 Dec 2012 18:51:00 +0000

W odpowiedzi do Vinci. Witaj, w "#menu li a {}" zmień siódemki w atrybucie "padding" na mniejsze. Pozdrawiam :-)

Autor: Vinci

Vinci — Thu, 27 Dec 2012 18:42:00 +0000

Co trzeba dodać by menu było węższe, nie krótsze. Chodzi mi o to by odległość dolnej i górnej krawędzi menu była bliżej tekstu będącym linkiem… Pozdrawiam super menu! :)

Autor: Maniek

Maniek — Mon, 22 Oct 2012 18:36:00 +0000

W odpowiedzi do kil. dzięki za odpowiedz, jednak dalej męczę się z tym kodem :)

Autor: kil

kil — Mon, 22 Oct 2012 17:37:00 +0000

Podam tu troszkę zmieniony kod, ale przynajmniej działa na trzy poziomy:)

#menu{ list-style:none; font: 14px Trebuchet MS; display: table; padding-top:13px; text-transform: uppercase;}#menu li{ position:relative; list-style-type: none; padding-left:15px; padding-right:15px; float: left; border-right: 1px solid #dca724;}#menu li a {display: block; color: #891f00; text-decoration: none; padding: 7px 10px 7px;} #menu li a:hover {color: white;}#menu li ul{ list-style: none; visibility: hidden; position:absolute; width:210px; top:32px; left:0; background: url(images/hoverBg.png) repeat; list-style-type: circle; z-index:99999; text-transform: none;}#menu li ul li{ position: relative;}#menu li li a {width: 160px;font-size: 14px;color:#fff;} #menu li ul li ul{ list-style: none; visibility: hidden; position: absolute; width: 210px; top:0; left: 210px;}#menu li li:hover{ background:#a50b0b url(images/over.jpg) repeat-y;}#menu li:hover >ul{ visibility: visible !important;}*:hover {-moz-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in;}

Autor: Maniek

Maniek — Mon, 22 Oct 2012 09:51:00 +0000

W odpowiedzi do krzysiek. Ja także mam problem z 3 poziomem menu, czy ktoś doszedł do rozwiązania?

Autor: Michał Kortas

Michał Kortas — Wed, 17 Oct 2012 06:18:00 +0000

W odpowiedzi do BooBoo. Witaj, możesz pokazać na jakiej stronie występuje ten problem? Chętnie się temu przyjrzę...

Autor: BooBoo

BooBoo — Wed, 17 Oct 2012 05:15:00 +0000

witam – super menu ! Po wstawieniu go na strone wyswietla sie ladnie.niestety jak chce wejsc do drugiej pozycji – po rozwinieciu menu – ono znika. Pierwsza pozycja po rozwinieciu sie menu w dol laduje sie ok a druga nie da sie kliknac – prosze o pomoc i z gory dzieki

Autor: krzysiek

krzysiek — Sun, 07 Oct 2012 20:42:00 +0000

W odpowiedzi do Michał Kortas. No właśnie tutaj mam problem, bo nie do końca wiem jak mam to poprawnie zadeklarować: #menu li li a {width: 160px;} - tutaj kolejne li? #menu li ul {overflow: hidden; display: none; background: #242424;} - tutaj kolejne ul? Czy mam jakoś inaczej to wpisać? Bo jakoś w ogóle nie może się wyświetlić ten trzeci poziom menu.

Autor: Michał Kortas

Michał Kortas — Sun, 07 Oct 2012 16:30:00 +0000

W odpowiedzi do Krzysiek. Witam i dziękuję, Krzysztofie! Musisz dodać do CSS linijki kodu odpowiedzialne za trzeci poziom (można je skopiować z poziomu drugiego i odpowiednio zadeklarować - 10 i 11 linijka z kodem). No i pozostaje przesunięcie w prawo - to również w CSS. Nie mam możliwości sprawdzenia z poziomu smartfona efektów, dlatego daj znać czy się udało.

Autor: Krzysiek

Krzysiek — Sun, 07 Oct 2012 15:19:00 +0000

Witam, to mój pierwszy komentarz tutaj. Po pierwsze muszę pogratulować autorowi strony ponieważ jest ona kapitalna i co najważniejsze często aktualizowana, za to BRAWA!

Teraz już moje pytanie. Co muszę dodać w CSS’ie żeby mieć trójwarstwowe menu? Tzn. po najechaniu na wysunięty element, chciałbym, żeby wysuwało się kolejne sub-menu w prawo. Jak to zrobić?

Z góry dziękuję za pomoc

Autor: Krystian

Krystian — Thu, 30 Aug 2012 11:00:00 +0000

Przy :hover (last-child) zapomniałeś o zaokrągleniu rogów:)

Autor: ptr

ptr — Thu, 30 Aug 2012 08:51:00 +0000

W odpowiedzi do Michał Kortas. można część rozwijaną podnieść do góry do poziomu menu wyższego stopnia i przesunąć w prawo?

Autor: Michał Kortas

Michał Kortas — Thu, 30 Aug 2012 08:42:00 +0000

W odpowiedzi do ptr. Wystarczy nie floatować #menu li {list-style-type: none; margin: 0 auto; float: left; } i nadać stałą szerokość.

Autor: ptr

ptr — Thu, 30 Aug 2012 08:27:00 +0000

czy można w szybki sposób zmienić te menu w pionowe?

Autor: dickw

dickw — Sat, 21 Jul 2012 11:57:00 +0000

W teście podczas tworzenia strony („podgląd” z dysku) na IE 8, Mozilla Firefox i Google Chrome działa OK (poza tym, że jak dodam trzecią pozycję do rozwijanego menu to dwie pierwsze są wyrównane do lewej, a trzecia pozycja już jest na środku). Jednak po zamieszczeniu strony na serwerze IE 8 nie wyświetla animacji (jedynie napisy menu), Mozilla i Chrome nie maja z tym problemu i wszystko jest OK… Nie wiem jak zaradzić, żeby IE8 poprawnie to wyświetlał… Ssytem: Win 7 32-bit…

Autor: Michał Kortas

Michał Kortas — Sun, 06 May 2012 17:51:00 +0000

W odpowiedzi do Arek. Dostosowałem kod CSS w poradniku do wyśrodkowania (włącz demo i odśwież żeby zobaczyć). Co do zwiększenia odstępów zmień poniższe wartości: #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;} Na przykład na takie: #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 15px 7px;}

Autor: Arek

Arek — Sun, 06 May 2012 17:27:00 +0000

Jak przesunąć menu na środek tego paska i zwiększyć odstępy pomiędzy nimi?

Autor: Mateusz

Mateusz — Tue, 24 Apr 2012 10:24:00 +0000

W odpowiedzi do Michał Kortas. Wtedy w ogóle nie działa, normalnie się pokazuje.

Autor: Michał Kortas

Michał Kortas — Tue, 24 Apr 2012 04:24:00 +0000

W odpowiedzi do Mateusz. Spróbuj dać 100%{display: block; height: auto;} Nie mam teraz gdzie sprawdzić, więc nie wiem czy zadziała...

Autor: Mateusz

Mateusz — Mon, 23 Apr 2012 23:26:00 +0000

W odpowiedzi do Michał Kortas. Coś mi się udało zrobić ale nie do końca działa. Zrobiłem coś takiego: #menu li ul { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-animation: wyjazd 2s; } @-webkit-keyframes wyjazd { 0%{display: block; height: 0%;} 100%{display: block; height: 100%;} } Ale wtedy rozwija mi menu na całą wysokość strony, zamiast na wysokość bloków.

Autor: Mateusz

Mateusz — Mon, 23 Apr 2012 22:51:00 +0000

W odpowiedzi do Michał Kortas. Niestety nie bardzo wiem jak utworzyć tę animację.

Autor: Michał Kortas

Michał Kortas — Mon, 23 Apr 2012 08:35:00 +0000

W odpowiedzi do Mateusz. Wydaje mi się, że trzeba ustawić animację, oraz jej czas, dla elementu #menu li ul {}

Autor: Mateusz

Mateusz — Sun, 22 Apr 2012 20:24:00 +0000

Super kod!:) Ale mam problem ze zmianą czasu oraz animacją wysuwania się bloków podmenu.