1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

W TRAKCIE Poprawienie menu-podkategorie

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika lukoa, 26 Czerwiec 2016.

  1. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    Witam,
    jak mogę poprawić swoje menu na sklepie żeby druga podkategoria była też bardziej przesunięta w prawo jak pierwsza podkategoria? Podczas rozwijania zaczynając od kategorii głównej opis podkategorii się przesunie lekko w prawo natomiast podkategoria podkategorii już się nie przesunie i nie widać że to się dalej rozwinęło. Dalej chciałbym, aby było w ten sposób że jak rozwijam kolejno to żeby np włączona kategoria główna się pogrubiła (żeby było widać że jest wciśnięta) i tak samo kolejno wciskając 1 podkategorię żeby się również pogrubiła i kolejna podkategoria również itd itp. Na chwilę obecną to jest bardzo nieczytelne niestety.
    Nie wiem czy na zdjęciu opisowym i w samym opisie jest to jasne bo ciężko tak troszkę to wytłumaczyć, ale może uda mi się w samym opisie.

    Wygląd menu (jeżeli nie jest to utrudnieniem to można byłoby zmienić kolor tego co wciśnięte i pogrubić):

    Kategoria 1 (pogrubiona jeżeli wciśnięta)
    Podkategoria
    Podkategoria
    Podkategoria podkategorii (pogrubiona jeżeli wciśnięta)
    Podkategoria
    Podkategoria
    Kategoria 2
    Kategoria 3
    Kategoria 4


    itd itp
    :D

    na chwile obecną to wygląda to tak i nie wiadomo co w danej chwili jest wciśnięte nawet. Niby jest podświetlone ramką na niebiesko ale co jest rozwinięte to nie wiadomo:oops::
    Kategoria 1
    Podkategoria
    Podkategoria

    Podkategoria podkategorii
    Podkategoria
    Podkategoria
    Kategoria 2
    Kategoria 3
    Kategoria 4


    da radę to ogarnąć w jakiś sposób? Szybko i bezboleśnie? A ten obrazek zrobiony w paint-ie to nie należy chyba do najlepszych :D:D:D:D:D
     

    Załączone pliki:

  2. Grzesiek

    Grzesiek Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 564
    Docenione treści:
    325
    Udało mi się tylko coś takiego stworzyć:
    Kod:
    #box_menu ul li .level_2 {
        padding-left: 6em;
    }
    @TheL pomysł?
     
    iisjah lubi to.
  3. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    wkleić to gdzie? Do własnego kodu CSS? Bo mam coś już tam dodane więc jak wstawię ten kod to nic to nie zmienia a mam dodane to:
    #box_menu ul li.current > a {
    color: #fff;
    background-color: #59B6FF;
    }
    element.style {
    }
    .menu .innermenu .menu-list li h3 a {
    padding: 0.9em;
    color: #554FB1;
    }
    @media (max-width: 800px){
    #facebook {
    width: 210px;
    visibility:hidden;
    height: 290px;
    position: fixed;
    top: 250px;
    background-color: #fff;
    border: 5px solid #3B5997;
    right: -230px;
    z-index: 50
    padding:5px;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
    }}
    @media (min-width: 800px){
    #facebook {
    width: 210px;
    height: 290px;
    position: fixed;
    top: 250px;
    background-color: #fff;
    border: 5px solid #3B5997;
    right: -230px;
    z-index: 5;
    padding:5px;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    transition: right 0.5s ease-out;
    }
    #facebook:after{
    content: url('../images/user/fb.png');
    position: absolute;
    left: -45px;
    top: -5px;
    cursor: pointer;
    }
    #facebook:hover {
    right: 0;}
    }
     
  4. Grzesiek

    Grzesiek Centrum Pomocy home.pl Administrator forum

    Wiadomości:
    3 564
    Docenione treści:
    325
    Tak, do własnego stylu, dodaj na końcu, zobaczymy co będzie. Możesz profilaktycznie utworzyć kopię skórki, aktywować ją, wkleić zmiany. W razie W wrócimy do kopii poprzedniej, ale wątpię aby coś się wydarzyło.
     
  5. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    no to jak go wklejam na końcu to nic sie nie dzieje-nie zauważam zmian w menu bynajmniej :(
     
  6. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    521
    dobra to ja poproszę powoli w punktach o co chodzi :) menu już ruszałem w każdym kierunku więc się da tylko poproszę o rozpiskę co jak i gdzie bo za dużo czasu nie mam na rozczytywanie całych zdań :)
     
  7. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    Jak w pierwszym moim poście i w wielkim skrócie.
    Jest tak:
    Kategoria 1
    Podkategoria
    Podkategoria
    Podkategoria podkategorii
    Podkategoria
    Podkategoria
    Kategoria 2
    Kategoria 3
    Kategoria 4


    a chciałbym tak:

    Kategoria 1 (pogrubiona jeżeli wciśnięta/rozwinięta)
    Podkategoria
    Podkategoria (pogrubiona jeżeli wciśnięta/rozwinięta)

    Podkategoria podkategorii (pogrubiona jeżeli wciśnięta/rozwinięta)
    Podkategoria
    Podkategoria
    Kategoria 2
    Kategoria 3
    Kategoria 4


    Ewentualnie ta kategoria/podkategoria etc., która w danej chwili jest wciśnięta i pokazywana- niech będzie podświetlony na niebiesko w ramce-tak jak mam w tej chwili zrobione na stronie

    Każda podkategoria jak i podkategoria-podkategorii żeby była wsunięta to środka jak na przykładzie powyżej. Po prostu żeby było widoczne która jest wciśnięta i co należy do której kategorii i podkategorii.

    A ten kod długi który wkleiłem Ja to taki po prostu mam dodany do własnego stylu CSS już w jakimś celu, po coś-to tylko tak wkleiłem bo może przez to nie działał kod Grzegorza.
     
  8. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    521
    dużo nie mam czasu więc to tylko przykład pokolorowany:
    Kod:
    .current_parent {
    background-color: yellow;
    }
    .current_parent ul li {
    margin-left: 30px;
    background-color: grey;
    }
    .current_parent ul li li {
    margin-left: 20px;
    background-color: green;
    }
    
    .current_parent - pokolorujesz główne kliknięcie
    .current_parent ul li - pokolorujesz i odsuniesz 1 poziom po kliknięciu
    .current_parent ul li li - pokolorujesz i odsuniesz 2 poziom po kliknięciu

    przykład poniżej, kolory chyba angielskie znasz :D

    jak nie zadziała wstaw we własne integracje przed </body> w znacznikach <style></style>
    obrazek.png

    oczywiście możesz to rozbudować o hovery i inne takie jak Ci się tylko życzy :D
     
  9. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    kolory znam :p-zobaczymy jak to będzie wyglądało a rozumiem że bez tego kolorowania sie nie da? W sensie żeby to tylko pogrubiać?
    Zawsze coś, ale niestety nie o taki cuda mi chodziło bo staje się to mało czytelne niestety i za dużo tych kolorów. Jednak mimo wszystko-Dzięki za chęć pomocy :D

    zamiast linii z kolorem co trzeba dopisać żeby pogrubiało? Na chwil eobecną jak to wyrzuciłem (linię z kolorami) to się już wsuwa w prawo każda podkategoria tylko jest taki problem że po wciśnięciu kategorii delikatnie się przesuwa też całe menu w prawo.
    Mam wpisane tak:
    .current_parent ul li {
    margin-left: 30px;
    }
    .current_parent ul li li {
    margin-left: 20px;
    }
     
    Ostatnia modyfikacja: 28 Czerwiec 2016
  10. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    521
    Ja właśnie podałem przykład wyraźny. Kolorów może nie być. Jak wstawisz przed </body> to możesz dać pogrubienia. W przykładzie chodziło o podanie samych klas, co z nimi zrobisz to już inna sprawa :) jak coś to pogrubienie to font-weight :) podałem Ci też informację o hoverach które mogą się przydać. Dodajesz je jako kolejne klasy z :hover. Może potem znajdę chwilę aby podać Ci pełny gotowy kod ale nic nie gwarantuję.
     
  11. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    no to właśnie proszę żebyś niebawem znalazł chwilę bo ja to aż taki dobry w to nie jestem-kombinuję ale nic mi nie wychodzi niestety i nie działa jak bym chciał. Także w wolnej chwili bardzo bym prosił o pomoc i podesłanie tzw. gotowca. W takim razie pozostaje mi tylko czekać na Twoją wolna chwilę:rolleyes:
     
  12. lukoa

    lukoa Spryciarz

    Wiadomości:
    46
    Docenione treści:
    9
    no i jak TheL z twoją wolną chwilą? Da radę ogarnąć to moje menu?
     
  13. wojt alinski

    wojt alinski Nowy użytkownik

    Wiadomości:
    1
    Docenione treści:
    0
    Podbijam temat.

    Gdzie w plikach są zdefiniowane poniższe typy .current_parent? Nigdzie nie mogę tego znaleźć, a wklejenie tego kodu w styl własny CSS nie do końca spełnia swoje zadanie.

    Kod:
    .current_parent {
    background-color: yellow;
    }
    .current_parent ul li {
    margin-left: 30px;
    background-color: grey;
    }
    .current_parent ul li li {
    margin-left: 20px;
    background-color: green;
    }
    
     

Poleć forum znajomym