Burza mózgów - semantyka a estetyka

Question

Hej.

Jestem fanem gwałcenia CSS w celu wyeliminowania potrzeby korzystania z JS przy efektach graficznych. A przy tym staram się pisać kod z jak najmniejszą ilością znaczników. I teraz, z powodu braku selektora rodzica w CSS (chyba rok temu zostałem nabrany przez Pana w3schools to nie W3C [żeby nie wywoływać po nicku) na to, że wszedł do specki CSS 4... ), jestem zmuszony wybierać między semantyką a estetyką, chyba że może istnieje jakieś rozwiązanie?

Do rzeczy. Najpierw opiszę problem wyłącznie wirtualnie:

Muszę umieścić w <ul> znacznik <img> (ul img {} ). Mogę oczywiście zrobić zrobić li > img. Ale to <ul> to niestety jest menu, a img to tylko ozdobnik graficzny. Ozdobnik graficzny sam w sobie nie może być niestety elementem menu.

Chcę zrobić ciekawą w samym CSS. Mianowicie chcę manipulować obrazkiem przy li:hover, tak więc <img> musi się znajdować na tym samym poziomie albo niżej, a pseudoelementy odpadają (są pozycjonowane względem elementu, na którym są tworzone, a musze pozycjonować obrazek (lub jego rodzica) względem <ul> a nie <li>).

Teraz by to urzeczywistnić, podsyłam kod HTML oraz screenshot tego, co jest tymczasowo (obrazek wstawiony niepoprawnie, ponieważ jest traktowany przez semantykę, jako element menu. Linki dowolne, nie mają znaczenia. Są zdublowane, aby wypełniały miejsce - docelowo maksymalnie 8 pozycji).

	<nav id="menu" class="menu">
			<ul>
				<li>
					<a href="#">Main page</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
				<li>
					<a href="#">Links</a>
				</li>
				<li>
					<a href="#">Blog</a>
				</li>
				<li>
					<a href="#">Close menu</a>
				</li>
				<li>
					<a href="#">Links</a>
				</li>
				<li>
					<a href="#">Blog</a>
				</li>
				<li>
					<a href="#">Close menu</a>
				</li>
				<li>
					<img src="assets/img/menu-arrow-big.png" width="30px">
				</li>
			</ul>
		</nav>

Screenshot: http://i.imgur.com/dZxMeEU.png

Idea jest taka, że przy najeździe na pozycję menu, obraca się w jej stronę strzałka. Wszystko w CSS przypominam. Oczywiście obrót działa. Mam tylko zagwostkę z poprawnym wstawieniem obrazka. W JS to oczywiście żaden problem, ponieważ jego DOM jest bardziej elastyczny niż ten CSS-owy, natomiast zdecyduję się na rozwiązanie JS tylko wtedy, kiedy będzie jedynym wyjściem. Zapraszam do dyskusji i proszę tylko o przemyślane odpowiedzi.

Answer 1

http://webmaster.helion.pl/index.php/css3-transformacje/6/468-css3-transform-rotate

Chodzi o to?

Btw. wrzuciłbyś kodzik na jakiegoś codepena czy innego jsfiddla

Comments

Swoją drogą wyguglowałem:

https://cssanimation.rocks/clocks/

a tu na szybkiego nawklejałem :P

http://jsfiddle.net/3oe7kygn/

---

Nie chodzi o to, że nie umiem wykonać zegara. Jestem w stanie w CSS wykonać prawie wszystko. Problem tak naprawdę w ogóle nie dotyczy CSS, tylko DOM i semantyki wstawienia obrazka. Skopiuje swoją wiadomość:

Strzałka ma się obracać w stronę najechanego <li>. Mam więc zdarzenie li:hover i muszę je jakoś przenieść na obrazek strzałki. I teraz jest problem taki - jak umieścić w kodzie (CSS lub HTML) obrazek strzałki, żeby był do niego dostęp z każdego li:nth-of-type(x):hover i równocześnie było to semantyczne.

Answer 2

Wytłumacz obrazowo jak ma te menu wyglądać.

Pseudoklasę after i before może ustawić dla samego ul.

Co takiego ta strzałka ma robić? Nie mogę sobie tego wyobrazić.

Comments

Wytłumaczyłem. Strzałka ma się obracać w stronę najechanego <li>. Mam więc zdarzenie li:hover i muszę je jakoś przenieść na obrazek strzałki. I teraz jest problem taki - jak umieścić w kodzie (CSS lub HTML) obrazek strzałki, żeby był do niego dostęp z każdego li:nth-of-type(x):hover i równocześnie było to semantyczne.

---

Już rozumiem. Chyba nie zauważyłem tego screena, chyba że dodałeś go później.

Myślę, że użycie JS'a to nic złego. Jeśli byś chciał to zrobić w samym CSS to prawdopodobie musiałbyś zrezygnować z listy i użyć div'ów tak jak w przykładach z tymi zegarkami.

Fajnie, że przywiązujesz dużą wagę, aby twój kod był semantyczny. Jednak czasami warto odpuścić i skupić się na użetyczności.

---

Wygląd to nie jest użyteczność. Co najwyżej efektowność.

Wiem, że użycie JS-a to nic złego, ale to DA się zrobić w CSS, więc chciałem to zrobić w CSS. Ale skoro będę używał AJAXa, to i tak nie mogę powiedzieć, że moja strona to zero JS (pomimo licznych i ciekawych efektów). W związku z tym użyję JS.

---

Jak będę dziś w domu to pogrzebię i możliwe, że coś się da tym CSSem osiągnąć. Chociaż nie obiecuję :)

---

Fajnie. Mam nadzieję, że poprawnie rozumiesz problem i nie zmarnujesz tego czasu :) Ja tymczasem to zakoduję na ul:before i li:hover przekażę poziom wyżej za pomocą JS.

Answer 3

Prawdopodobnie skończę z rozwiązaniem JS, ponieważ wydaje mi się, że i tak będę używał do AJAXa.