Jump to content
Sign in to follow this  
Maniek xD

Oznaczenie strzałką aktywnej strony w menu CSS

Recommended Posts

Witajcie. Mam pytanie. Jak zrobić taką strzałkę przy pasku w aktywnym linku czyli jak jestem na danej podstronie? Spodobało mi się to główkuję 2 godziny i nic nie mogę wymyśleć. SS w załączniku

 

image

Share this post


Link to post

No to w czym problem masz? Robisz tak samo jak hover tylko dajesz active i robisz klase jak hover tylko + active

Share this post


Link to post

tak tylko jak tą strzałke z paskiem zrobić?

Share this post


Link to post

Możesz tą strzałkę dodawać jako tło z odpowiednim pozycjonowaniem. Możesz również użyć czegoś takiego jak :after lub :before i za pomocą CSS tworzyć taki trójkąt a następnie ustawić go dla aktywnej klasy albo jeżeli nie chcesz bawić się w CSS (tj, dopasować wielkość trójkąta) to za pomocą FontAwesome dodawać go a rozmiar zmieniać tak jak w przypadku czcionek.

Share this post


Link to post
http://blog.piotrnalepa.pl/2012/10/11/css-magia-figur-uzyskanych-za-pomoca-css/

Edytuj i masz ☺️

Share this post


Link to post

Tylko nie bardzo rozumiem dlaczego każecie mu tworzyć jakiś kształt. Wystarczy stworzyć pseudoelement i odpowiednio go wypozycjonować.

Tutaj zrobiłem coś takiego (podobnego), może Ci się przyda: http://codepen.io/Salvation/pen/rLkQXK

Share this post


Link to post

No przecież tworzysz pseudoelement, który wygląda jak trójkąt i odpowiednio go ustawiasz. Czyli tworzysz kształt...

Share this post


Link to post

No teoretycznie masz rację, ale ja tam wykorzystałem kwadrat

Share this post


Link to post

Nadal nie mam pojęcia jak to zrobić do czego zastosować wtedy border bottom żeby było podkreślenie?

Tutaj chodzi oto aby do podkreślenia dodać trójkącik ale żeby był widoczny tylko wtedy gdy link jest aktywny

Share this post


Link to post

Źle rozumujesz. Podkreślenie daj dla całego <ul>, a dla aktywnego menu stwórz ::before i nadaj mu odpowiedni opis w CSSie.

Share this post


Link to post

A właśnie, tak lekko odbiegając od tematu, która forma jest poprawna, ::before czy :before? Ja zawsze uzywalem tego drugiego i CSS działał prawidłowo a większość osób nie podając przykładów sugeruje użyć formy pierwszej, wiec ma to jakieś znaczenie czy nie?

Share this post


Link to post

:: - pseudoelementy  http://webkod.pl/kurs-css/selektory/pseudoelementy/selektor-before

: - pseudoklasy  http://webkod.pl/kurs-css/selektory/pseudoklasy/selektor-nieodwiedzonego-linku

Jak wyczytać można:

Selektor :before możemy również zapisywać za pomocą dwóch dwukropek, czyli ::before, dzięki czemu możemy łatwiej odróżnić, w naszym kodzie, selektory pseudoelementów od selektorów pseudoklas, jednak raczej zaleca się posługiwaniem jednym dwukropkiem.

Ja stosuję dwa dwukropki dla "czystszego" kodu. I w większości przykładów jakie znajduję te dwa dwukropki jednak występują.

  • Like 3

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...