GoldenLine
Zaloguj się
Małgorzata B.

Małgorzata B. ***

Temat: Menu: border-bottom jako domyślne & click event

Może ktoś mi podpowie jak zrobić w CSS-ach
https://jsfiddle.net/xufdmx5y/6/
żeby:
1) domyślnie po kliknięciu w menu nadrzędne wyświetliłam się strona z domyślnie zaznaczonym (podkreślenie linią i zmieniony kolor teksu np na zielony) menu 'O mnie' oraz zaznaczonym na szaro div-em, który jest powiązany z menu
2) po kliknięciu w inny element menu ma ona zostać zaznaczony (podkreślenie linią i zmieniony kolor teksu np na zielony) , a wcześniejszy odznaczony. Odpowiednio też ma zostać zmieniony kolor div-a, który mu odpowiada.
Przykładowo jak kliknę 'Wydarzenia' to także cały div o id = "events" zostanie zaznaczony na szaro.

P. S. W załączonym linku z kodem linia wyświetla się przez całą szerokość to nie ma znaczenia tutaj, bo u mnie działa dobrze.
Link do wypowiedziLink
Marek Karmelski

Marek Karmelski PHP Programmer,
Magento dev, Agencja
reklamowa White
Ducky

Temat: Menu: border-bottom jako domyślne & click event

To już nie css, aby osiągnąć taki efekt między requestami musisz przesyłać id zakładki którą klikasz (PHP), aby później moc ją odpowiednio ostylować.
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Menu: border-bottom jako domyślne & click event

Dziękuję za odpowiedź. Myślałam, że da się to jakoś zrobić w css, jq.
Link do wypowiedziLink

konto usunięte

Temat: Menu: border-bottom jako domyślne & click event

Witam.
Nie wiem czy dokładnie o to chodziło ale tak "na szybko":
https://jsfiddle.net/piotrrgl/k4tm5k8d/15/
Jeśli chodzi o konkretny styl po kliknięciu na link
to można go sprecyzować już w CSS-ie.
Ja na razie aktualnie wybrany link koloruje na czerwono.

p.s.
Jeśli mogę coś zasugerować to lepiej id-ków używac jaknajmniej (tylko w koniecznych przypadkach).
Głównie lepiej używać klas i selektorów elementów(np.ul,li itd.).
Style też lepiej wyeksportować do pliku nie bezpośrednio w atrybucie style ;)Ten post został edytowany przez Autora dnia 14.02.16 o godzinie 16:22
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Menu: border-bottom jako domyślne & click event

Dziękuję o to mi chodziło.

A jeszcze mam pytanie - zastanawiam się nad tym by zamiast kolorować na szaro aktywny tekst, ukrywać ten który nie jest powiązany z bieżącym id menu, coś takiego:
https://jsfiddle.net/k4tm5k8d/16/
Ale przy pierwszym wczytaniu widać jak tekst nie powiązany z domyślny id menu "ukrywa się", tzn przez chwilę jest widoczny i znika. Czy da się z tym coś zrobić?
Link do wypowiedziLink

konto usunięte

Temat: Menu: border-bottom jako domyślne & click event

Witam.
Jeśli dobrze rozumiem, menu ma działać mniej więcej tak, że przy pierwszym załadowaniu na stronie widać wszystkie divy nie związane z bieżącym/wybranym z menu elementem tzn.
na początku widać coś takiego:

My name is...

email@xxxx.com

event1

a dopiero potem po kliknięciu w konkretny element w menu, znika wszystko to co nie jest w danej chwili związane z tym elementem.
Tzn. klikam 'o mnie' i znika wszystko oprócz:

My name is...

https://jsfiddle.net/piotrrgl/Ltwrkze9/7/

p.s.
Jeśli mogę coś zasugerować to gdy tak ma już zostać, to może nie zaznaczać aktywnego elementu w menu na starcie jeśli są wszystkie divy widoczne ale dopiero po kliknięciu.
Jeśli jednak nie o to chodzi, to proszę napisać coś więcej a wtedy może jakoś da się to rozwiązać. :)
Bo ja rozumiem "tekst nie powiązany z domyślny id menu" jako:

My name is...

email@xxxx.com

event1

Jeśli jednak jest to po prostu element z menu typu np "o mnie", który zostaje widoczny po wczytaniu strony jako pierwszy aktywny a reszta elementów menu ukrywa się, to chyba w Pani przykładzie tak się nie dzieje, wg mnie chyba jest Ok ;)

Pozdrawiam.Ten post został edytowany przez Autora dnia 14.02.16 o godzinie 16:24
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Menu: border-bottom jako domyślne & click event

Scenariusz:
1) po otwarciu strony domyślnie ma być zaznaczone menu 'O mnie' i wyświetlać ma się tylko tekst z nim powiązany, czyli 'My name ...' (pozostały tekst ukryty)
2) po kliknięciu na inny element menu, ma być widoczny tylko tekst, który jest powiązany z wybranym menu (pozostały tekst ukryty)

Teraz niby jest zgodnie z powyższym scenariuszem, tylko przy wczytywaniu strony (jak się dobrze przyjrzeć) to widać jak ukrywają się (przez moment są widoczne i znikają) teksty dotyczące kontaktu i wydarzeń. Chyba, że takie zachowanie widać tylko w mojej przeglądarce (Firefox 44.0.2).
Link do wypowiedziLink

konto usunięte

Temat: Menu: border-bottom jako domyślne & click event

Chyba już widzę o co chodzi. :) Faktycznie w FireFoxie jest to opóźnienie.W Chrome nie było to widoczne, i chyba to mnie zmyliło :)
Tutaj wydaje mi się że jest to kwestia ładowania plików.
Zamiana miejscami linku do stylów powinna pomóc.
Style powinny załadować się jako pierwsze a ukrywanie zadziałać wtedy tak jak powinno.

Zamiana kolejności w head z:


<script src="jquery-1.12.0.min.js"></script>

<script src="menu.js"></script>

<link rel="stylesheet" type="text/css" href="style.css"/>

na


<link rel="stylesheet" type="text/css" href="style.css"/>

<script src="jquery-1.12.0.min.js"></script>

<script src="menu.js"></script>

https://jsfiddle.net/piotrrgl/nbr5btx4/4/

Pozdrawiam.Ten post został edytowany przez Autora dnia 14.02.16 o godzinie 23:57
Link do wypowiedziLink
Małgorzata B.

Małgorzata B. ***

Temat: Menu: border-bottom jako domyślne & click event

Dziękuję, teraz tekst wyświetla się prawidłowo.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Menu rozwijalne w CSS




Wyślij zaproszenie do
Anuluj