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

Menu input radio

VPS Starter Arubacloud
+1 głos
167 wizyt
pytanie zadane 26 stycznia 2021 w HTML i CSS przez JBacob Nowicjusz (130 p.)

Witam, mam problem ze stworzeniem menu portfolio za pomocą inputów radio. A mianowicie stworzyłem takie menu 

		<input class="nav-menu" id="all" type="radio" name="filter" checked="checked">
		<label for="all">Wszystkie</label>
		
		<input class="nav-menu" id="illustrations" type="radio" name="filter">
		<label for="illustrations">Ilustracje</label>
		
		<input class="nav-menu" id="posters" type="radio" name="filter">
		<label for="posters">Plakaty</label>
		
		<input class="nav-menu" id="typography" type="radio" name="filter">
		<label for="typography">Typografia</label>
		
		<input class="nav-menu" id="packaging" type="radio" name="filter">
		<label for="packaging">Opakowania</label>

i zdefiniowałem go w css

.row .nav-menu,
.portfolio
{
	display: none;
}

label
{
	padding: 5px 10px;
	margin: 0px;
	color: #3a3f43;
	cursor: pointer;
	display: inline-block;
}

.nav-menu:checked + label
{
	color: #fff;
	background-color: #3a3f43;
	border-radius: 3px;
}

#all:checked ~ .portfolio .all,
#posters:checked ~ .portfolio .poster,
#illustrations:checked ~ .portfolio .illustration,
#typography:checked ~ .portfolio .typography,
#packaging:checked ~ .portfolio .package
{
	display: block;
}

klasa portfolio to kontener dla wszystkich prac, każda praca jest w znaczniku figure z nadaną klasą kategorii oraz all. Chodzi o to żeby po naciśnięciu labela z nazwa kategorii wyswietlały sie prace tylko z tej kategorii, a z jakiegoś powodu to nie działa. 

Z góry dziękuje za każdą pomoc.

komentarz 26 stycznia 2021 przez Tomek Sochacki Ekspert (227,510 p.)
a czemu robisz tu elementy radio? menu nie pasuje mi za bardzo do elementów formularza... nie lepiej bardziej standardowo jako lista. np. z buttonami?
komentarz 26 stycznia 2021 przez JBacob Nowicjusz (130 p.)
W sumie to tak zrobiłem na początku. To robie dla siebie tylko z ciekawości czy dałoby się tak zrobić
komentarz 27 stycznia 2021 przez VBService Ekspert (251,210 p.)

@JBacob, Udostępnij, proszę więcej html, trudno się odnieść do tego co już jest. wink

komentarz 27 stycznia 2021 przez JBacob Nowicjusz (130 p.)
edycja 27 stycznia 2021 przez JBacob
<main  class="container">
	<div class="row">

		<input class="nav-menu" id="all" type="radio" name="filter" checked="checked">
		<label for="all">Wszystkie</label>
		
		<input class="nav-menu" id="illustrations" type="radio" name="filter">
		<label for="illustrations">Ilustracje</label>
		
		<input class="nav-menu" id="posters" type="radio" name="filter">
		<label for="posters">Plakaty</label>
		
		<input class="nav-menu" id="typography" type="radio" name="filter">
		<label for="typography">Typografia</label>
		
		<input class="nav-menu" id="packaging" type="radio" name="filter">
		<label for="packaging">Opakowania</label>
	
	</div>
 
	<section class="portfolio">
		<div class="row">
			<figure class="three columns all poster">
				<img src="images/image-1.jpg" alt="To jest pierwsza miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-2.jpg" alt="To jest druga miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all poster" data-category="plakaty">
				<img src="images/image-3.jpg" alt="To jest trzecia miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all typography" data-category="typografia">
				<img src="images/image-4.jpg" alt="To jest czwarta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
		</div>
		<div class="row">
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-5.jpg" alt="To jest piąta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all poster" data-category="plakaty">
				<img src="images/image-6.jpg" alt="To jest szósta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-7.jpg" alt="To jest siódma miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all typography" data-category="typografia">
				<img src="images/image-8.jpg" alt="To jest ósma miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
		</div>
	</section>
</main>
komentarz 27 stycznia 2021 przez niezalogowany

Myślę że było by Łatwiej gdybyś doręczył całość jak wspomniał user @VBService!

enlightenedsmiley
 

1 odpowiedź

+1 głos
odpowiedź 27 stycznia 2021 przez pablop76 VIP (123,060 p.)

W takiej formie nie jest to możliwe, ponieważ nie ma takiej kombinacji selektorów. Nie możesz wybrać dowolnego elementu DOM

dostępne możliwości w css

Selektor Opis
div span Selektor potomków (wszystkie <span>są potomkami a <div>)
div > span Selektor dziecka (wszystkie <span>są bezpośrednim dzieckiem a <div>)
a ~ span Ogólny selektor rodzeństwa (wszystkie osoby <span>będące rodzeństwem po znaku <a>)
a + span Selektor sąsiadującego rodzeństwa (wszystkie <span>bezpośrednio po znaku <a>)

 źródło 

komentarz 27 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

W takiej formie nie jest to możliwe, ponieważ nie ma takiej kombinacji selektorów. Nie możesz wybrać dowolnego elementu DOM

Selektory, których autor użył działały by, gdyby nie fakt, że próbuje się dostać do rodzeństwa parenta, a nie rodzeństwa elementu docelowego.

Przykład dla selektora #illustrations:checked ~ .portfolio .illustration, tylko z bardziej płaską strukturą HTML (kliknięcie w radio zmienia kolor potomka elementu następującego po tym radio):

https://codepen.io/ScriptyChris/pen/XWjvGQp

komentarz 27 stycznia 2021 przez pablop76 VIP (123,060 p.)

tylko z bardziej płaską strukturą HTML

 To właśnie pokazuje tabelka

Podobne pytania

+1 głos
2 odpowiedzi 188 wizyt
pytanie zadane 17 kwietnia 2021 w HTML i CSS przez Rafał Termoaktywny Początkujący (400 p.)
0 głosów
0 odpowiedzi 127 wizyt
pytanie zadane 15 października 2019 w PHP przez jared Gaduła (3,600 p.)
0 głosów
1 odpowiedź 531 wizyt
pytanie zadane 3 grudnia 2019 w HTML i CSS przez Kolberg Obywatel (1,560 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 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!

...