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

Menu input radio

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
250 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,490 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 (255,840 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,460 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,460 p.)

tylko z bardziej płaską strukturą HTML

 To właśnie pokazuje tabelka

Podobne pytania

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

93,106 zapytań

142,082 odpowiedzi

321,605 komentarzy

62,447 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...