Skocz do zawartości

Szukam kogoś kto umie CSS


Rekomendowane odpowiedzi

Witajcie mam w swoim sklepie rozwijane menu. Chciałem je przerobić mianowicie mam tak: https://world4players.com/

(niestety muszę podać link byście zobaczyli jak aktualnie wygląda)

tzn. kreska po najechaniu na zakładkę "dyski" jest tak oddalona od tego wyrazu. Chciałbym by była bliżej ale również była schowana zanim najedzie się na nią. Wiecie co mam zmienić w tym? Poniżej wklejam fragment CSS który odpowiada za ten element.

 

#_desktop_top_menu ul.top-menu[data-depth="3"] {
    padding-top: 0;
}
ul.top-menu[data-depth="3"]>li {
    overflow: hidden;
}
.top-menu a[data-depth="3"] {
    position: relative;
    color: #000;
    margin-bottom: 10px;
    padding: 0 0 0 15px;
    margin-left: -5px;
    transition: all .3s;
}
.top-menu a[data-depth="3"]:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    display: inline-block;
    margin: auto;
    width: 10px;
    height: 1px;
    border-bottom: 1px solid #000; 
}
.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

 

ewentualnie bym chciał również by zamiast takiej kreski rozwijały się dalsze etapy tego menu w dół. Tzn po najechaniu na "Kategorie: wysuwa się pierwsza część potem po najechaniu na podzespoły do laptopów kolejne i po najechaniu na dyski ostatnie menu. Żeby nie było wszystko już rozwinięte. (oczywiście to tylko moje zastanowienie czy lepiej by to nie wyglądało i czy dużo przeróbek z tym). Jak za dużo roboty to już by mogły zostać te kreski ale żeby lepiej to wyglądało i odróżniało się od wyższego stopnia

Edytowane przez JimUSA

Wbij i znajdź ludzi z którymi pograsz: Discord - Family Crew
Zapraszam do mojego sklepu: world4players

Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut i wiele więcej!

 

 

Godzinę temu, Skipi napisał:

.top-menu a[data-depth="3"]:before {

left: -5px;

}

tu musisz zmienić zobacz 0 czy tak jak chciales 

tak miałem na początku i kreski były cały czas a nie o to mi właśnie chodziło ? 

28 minut temu, cantoro napisał:

Można zrobić coś takiego:


.top-menu a[data-depth="3"]:hover:before {
    left: 0;
}

 

też jest fajne ale jeszcze wolałbym pokombinować jak zrobić taki efekt co opisałem

jak się nie uda to ten wtedy zostawię

Edytowane przez JimUSA

Wbij i znajdź ludzi z którymi pograsz: Discord - Family Crew
Zapraszam do mojego sklepu: world4players

Odnośnik do komentarza
Godzinę temu, lutzen napisał:

image.png.bf3d0e977c7be991d8dbd2c3019a7050.png

Nie wiem czy o taki efekt chodziło ;) Jak chcesz mniejszy / większy odstęp, to dostosuj sobie zmieniając padding i 8px, które użyłem do przykładu.

dobra a żeby teraz oddalić trochę te całe napisy? w sensie żeby  Dyski były bardziej w prawo niż Podzespoły do laptopów, tzn litera "D" od słowa dyski była pod literą "O" lub "D" słowa Podzespoły (nie wiem czy rozumiesz ale starałem się wyjaśnić o co mi chodzi ;) )

Wbij i znajdź ludzi z którymi pograsz: Discord - Family Crew
Zapraszam do mojego sklepu: world4players

Odnośnik do komentarza

Nie bardzo mam teraz czas sprawdzać ale wydaje mi się, że przy rozwiązaniu lutzena wystarczy zmodyfikować margines ze stylu poniżej. Nie bardzo też rozumiem co było nie tak z moim rozwiązaniem. Swoją drogą myślałem, że to ja skupiam się za bardzo na szczegółach ;)

.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}
Odnośnik do komentarza
2 godziny temu, cantoro napisał:

Nie bardzo mam teraz czas sprawdzać ale wydaje mi się, że przy rozwiązaniu lutzena wystarczy zmodyfikować margines ze stylu poniżej. Nie bardzo też rozumiem co było nie tak z moim rozwiązaniem. Swoją drogą myślałem, że to ja skupiam się za bardzo na szczegółach ;)


.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

U ciebie nie bylo wlasnie wysuwania tej kreski tylko ona sie pojawiala ? i napis wtedy tez sie nie przesuwal w tym momencie

Wbij i znajdź ludzi z którymi pograsz: Discord - Family Crew
Zapraszam do mojego sklepu: world4players

Odnośnik do komentarza

Mam jeszcze jedno pytanie co do tego menu, to w czym trzeba zmienić i co, by moje menu po rozwinięciu pokazywało jakąś część a resztę dopiero po naciśnięciu np. Rozwiń dalej? Bo teraz mam tego całą masę bez sensu. Lepiej by było na połowę ekranu a później ten kto chce to sobie rozwinie liste dalej.

Wbij i znajdź ludzi z którymi pograsz: Discord - Family Crew
Zapraszam do mojego sklepu: world4players

Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .