• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

obrazkowe menu rozwijane, nie działaja linki, nie działa animacja - WHY???

VPS Starter Arubacloud
+1 głos
394 wizyt
pytanie zadane 1 listopada 2021 w HTML i CSS przez slv123 Nowicjusz (130 p.)

niestety nie moge uzyc js

 

temat polega na tym, ze musze miec obrazkowe menu na stronie lecz nie wchodza linki na rozwinietych obrazkach. podejrzewam, ze chodzi o to iz klikniecie zamyka menu zanim otworzy sie link. tutaj chcialem poradzic sobie opoznieniem animacji, lecz to tez nie dziala. 

moze sa lepsze sposoby na rozwiazanie tematu?

wielka prosba o pomoc

 

<style>
.kat-imgs {
height: 105px;
width: 210px;
padding: 5px;
margin: 5px;
border: 1px solid #ececec;
box-shadow: 1px 1px 3px 0px #ececec;
}


.rozwijacz {
cursor: pointer;
transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0.5s;
}

.rozwijacz:focus {
height: 0px;
}

.ukrytydiv {
display: none;
}

.rozwijacz:focus + .ukrytydiv {
display: flex;
flex-direction: column;
background-color: #fff;
}

.kategorie {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}

.katdiv {
display: flex;
flex-direction: column;
align-items: center;
}
</style>

<div class="katdiv">
	<div class="kategorie">
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Przyrodnicze/74"><img src="https://literaturka.pl//userdata/public/assets//zaint1-przyroda.svg" alt="Zainteresowania - Przyroda" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/MatematykaLiczenie/104"><img src="https://literaturka.pl//userdata/public/assets//zaint2-matematyka.svg" alt="Zainteresowania - Matematyka" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Kosmos/72"><img src="https://literaturka.pl//userdata/public/assets//zaint3-kosmos.svg" alt="Zainteresowania - Kosmos" /></a>
		</div>
	</div>
	<div class="rozwijacz" tabindex="1">
		<div class="kat-imgs">
			<img src="https://literaturka.pl//userdata/public/assets//zaint15-rwd.svg" alt="Zainteresowania - Zobacz wszystkie pozycje z kategorii" />
		</div>
	</div>
	<div class="ukrytydiv">
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Cialo-czlowieka/125"><img src="https://literaturka.pl//userdata/public/assets//zaint4-ludzkiecialo.svg" alt="Zainteresowania - Ludzkie ciało" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Muzyka/145"><img src="https://literaturka.pl//userdata/public/assets//zaint5-muzyka.svg" alt="Zainteresowania - Muzyka" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Dinozaury/86"><img src="https://literaturka.pl//userdata/public/assets//zaint6-dinozaury.svg" alt="Zainteresowania - Dinozaury" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/KsiezniczkiRycerzeZamkiSmoki/70"><img src="https://literaturka.pl//userdata/public/assets//zaint7-ksiezniczki.svg" alt="Zainteresowania - Księżniczki, rycerze, zamki, smoki"</a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Pojazdy%2C-maszyny%2C-plac-budowy/73"><img src="https://literaturka.pl//userdata/public/assets//zaint8-pojazdy.svg" alt="Zainteresowania - Pojazdy, maszyny, plac budowy" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Konie/126"><img src="https://literaturka.pl//userdata/public/assets//zaint9-konie.svg" alt="Zainteresowania - Konie" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Psy/140"><img src="https://literaturka.pl//userdata/public/assets//zaint10-psy.svg" alt="Zainteresowania - Psy" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Roboty/71"><img src="https://literaturka.pl//userdata/public/assets//zaint11-roboty.svg" alt="Zainteresowania - Roboty" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/PotworyDuchy/69"><img src="https://literaturka.pl//userdata/public/assets//zaint12-potwory.svg" alt="Zainteresowania - Potwory i duchy" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Sluzby-ratunkowe/136"><img src="https://literaturka.pl//userdata/public/assets//zaint13-ioio.svg" alt="Zainteresowania - Służby ratunkowe" /></a>
		</div>
		<div class="kat-imgs">
			<a href="https://literaturka.pl/pl/c/Historia/103"><img src="https://literaturka.pl//userdata/public/assets//zaint14-historia.svg" alt="Zainteresowania - Historia" /></a>
		</div>
	</div>
</div>

ajsdijvasdiasiudsaiugd

 

1 odpowiedź

+1 głos
odpowiedź 1 listopada 2021 przez Comandeer Guru (599,730 p.)

Najłatwiej byłoby to zrobić przy pomocy :target. Musiałbyś podlinkować do .rozwijacz, np:

<div class="rozwijacz" id="rozwin-menu">
        <div class="kat-imgs">
			<a href="#rozwin-menu">
            	<img src="https://literaturka.pl//userdata/public/assets//zaint15-rwd.svg" alt="Zainteresowania - Zobacz wszystkie pozycje z kategorii" />
			</a>
        </div>
    </div>

i wówczas style z .rozwijacz:focus zmieniasz na .rozwijacz:target. PoC.

Przy okazji usunąłem [tabindex], bo psuł nawigację klawiaturą (użytkownik byłby wrzucony do rozwijacza jako pierwszego elementu, co psuje kolejność nawigowania).

Podobne pytania

0 głosów
1 odpowiedź 436 wizyt
pytanie zadane 3 maja 2023 w HTML i CSS przez HUBSON2912 Obywatel (1,300 p.)
0 głosów
1 odpowiedź 273 wizyt
pytanie zadane 18 września 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
+1 głos
2 odpowiedzi 221 wizyt
pytanie zadane 28 kwietnia 2021 w HTML i CSS przez Hubert731 Obywatel (1,650 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...