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...

PORADNIK Dodatkowe menu rozwijane w sklepie Click Shop

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 21 Październik 2015.

  1. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Pojawiały się pytania o dodatkowe menu rozwijalne w sklepie, oto moje rozwiązanie:

    We własnym stylu wklejamy:

    Kod:
    
    #menunew {font-family: arial, tahoma;display: table; padding: 0 0px 0; margin: 0 auto; overflow: hidden; font-size: 15px; background: #3c3c3c;}
    #menunew li {font-family: arial, tahoma; list-style-type: none; margin: 0; float: left; margin-left:0px; margin-right:3px; padding-right:10px;}
    #menunew li:hover {font-family: arial, tahoma;background: #cccccc;}
    #menunew li a {font-family: arial, tahoma;display: block; color: #ffffff; text-decoration: none; padding: 7px 5px 7px;}
    #menunew li a:hover {font-family: arial, tahoma;background: #cccccc; color: #000000;}
    #menunew li li a {font-family: arial, tahoma;width: 250px; }
    #menunew li ul {font-family: arial, tahoma;overflow: hidden; display: none; background: #3c3c3c;margin-top:-1px;}
    #menunew li:hover ul {font-family: arial, tahoma;position: absolute; padding: 0; display: block; width: 190px;}
    .contmen {
       position: absolute;
       z-index:100;
    }
    #menunew *:hover {font-family: arial, tahoma;transition: 0.3s ease-in;}
    #menunew {font-family: arial, tahoma;border-radius: 3px;}
    #menunew li ul {font-family: arial, tahoma;border-radius: 0 0 3px 3px;}
    
    .kmenunew {  
    width:100%;
    margin-top:0px;
    background-color:#3c3c3c;
    z-index:10;
    text-align:left;
       position: absolute;
       height:35px;
    margin-bottom:3px;  
    }
    
    Tworzymy nowy moduł i po wyłączeniu edytora wizualnego wklejamy tam kod:
    Kod:
    <div class="kmenunew">
    <ul id="menunew">
    <li><a href="#">KATEGORIA 1</a>
    <ul>
    <li><a href="/link">jabłka</a></li>
    <li><a href="/link">śliwki</a></li>
    <li><a href="/link">morele</a></li>
    <li><a href="/link">banany</a></li>
    <li><a href="/link">pomarańcze</a></li>
    </ul>
    </li>
    <li><a href="#">KATEGORIA 2</a>
    <ul>
    <li><a href="/link">monitory</a></li>
    <li><a href="/link">klawiatury</a></li>
    <li><a href="/link">routery</a></li>
    <li><a href="/link">myszy</a></li>
    </ul>
    </li>
    <li><a href="/link">KATEGORIA 3</a></li>
    <li><a href="/link">KATEGORIA 4</a></li>
    <li><a href="#">KATEGORIA 5</a>
    <ul>
    <li><a href="/link">papier xero</a></li>
    <li><a href="/link">kawa</a></li>
    <li><a href="/link">woda</a></li>
    <li><a href="/link">mydło</a></li>
    <li><a href="/link">płyn do naczyń</a></li>
    </ul>
    </li>
    <li><a href="/link">KATEGORIA 6</a></li>
    <li><a href="/link">KATEGORIA 7</a></li>
    </ul>
    </div>
    
    W miejsca /link oraz # możemy wstawić własne linki. Jednak polecam główne kategorie zrobić "bezlinkowe" :D
    Jeśli po otwartym <li> mamy wpis z linkiem, a następnie otwieramy <ul> tworzymy podkategorie, pamiętajmy aby zamykać poprawnie tagi w dobrej kolejności.
    W przykładzie kategorie 1,2 i 5 posiadają podkategorie.

    Ufff. Dało się? Dało :D

    Przykład:
    menu.png
    Moduł wstawiamy w miejsce pod nagłówkiem strony.
     
    Grzesiek, michalhockey, neo oraz 3 innych użytkowników lubią tego posta.
  2. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Postanowiłem sprawdzić - faktycznie działa, ale trzeba w tym module w polu HTML ID wpisać "menunew". Kategorie mi się pojawiły, ale nie wiem czemu nie rozwija mi się lista :(
    Pozdrawiam!

    EDIT:
    @TheL dlaczego to polecasz? Pytam z ciekawości czy ma to związek z pozycjonowaniem?

    Edit2:
    Jednak działa wszystko :D To mój zmodyfikowany szablon po prostu wariuje :)
     
    Ostatnia modyfikacja: 28 Październik 2015
    Mariusz lubi to.
  3. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Sprawdzałem na swoim testowym sklepie "z czystym domyślnym szablonem" i działało, tak jak zauważyłeś, najprawdopodobniej użyty szablon w Twoim sklepie wariuje :confused:.

    @michalhockey pięknie edytujesz swoje poprzednie posty :). Szkoda, że nie wszyscy mają takie przyzwyczajenia.
     
  4. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Tak jak @Mariusz napisał coś musisz mieć zmienionego w sklepie jeśli się menu nie rozwija, na czystym sklepie działa prawidło.
    Jeśli chodzi o główne kategorie bez linkowe to pozycjonowanie swoją drogą, ale najważniejsze są przyzwyczajenia ludzi, często jest tak, że klikają w menu i nie patrzą, że się rozwija, a do czegoś takiego tego typu menu mija się z celem.
     
  5. spalk

    spalk Nowy użytkownik

    Wiadomości:
    1
    Docenione treści:
    0
    Mam pytanie jak zrobić aby nazwy tych kategorii były wyrównane do lewej, a nie wycentrowane?
    Ewentualnie z niewielkim marginesem od lewej...
     
  6. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    @spalk powinno wystarczyć dodanie jednego małego parametru float:left do pierwszej linijki kodu CSS:
    Kod:
    float:left


    Pierwsza linijka kodu CSS będzie wtedy wyglądała przykładowo tak:
    Kod:
    #menunew {font-family: arial, tahoma; padding: 0 0px 0; margin: 0 auto; float:left; display: table; overflow: hidden; font-size: 15px; background: #3c3c3c;}
     
  7. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    niewiem czy ktos testowal te mnenu ale nie za bardzo dziala bo sie dzieje tak :D
    [​IMG]

    na glownej spoko ale jak przeskakujemy na lista produktow to juz sie rozjezdza
     
  8. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    To menu nie zadziała w każdej sytuacji, w niektórych niestety zachowa się źle. Niedługo nowe wstawię dostosowane do każdej strony.
     
  9. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    czekamy ;]
     
  10. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    jak praca nad menu? :D udalo sie naprawic zeby przylegalo na stale do logo-baru? :)
     
  11. flex

    flex Użytkownik

    Wiadomości:
    55
    Docenione treści:
    62
    Cześć,

    @TheL dzięki za ciekawy wpis. Ponieważ ma on jeden mały mankament, linki trzeba dodawać ręcznie w tym dodatkowym module co dodaje sporo pracy za każdym razem jak coś się zmieni w kategoriach sklepu.

    Pozwoliłem sobie przygotować krótki kod który przerabia standardowe menu nagłówkowe tak by podzielić je na dwie osobne linie.

    Założenie:

    Robimy menu w nagłówku które posiada dwie linie dowolnych linków korzystając z wbudowanego menu nagłówkowego.

    Realizacja:

    clickshop posiada wbudowaną funkcję tworzącą linki w menu w nagłówku z możliwością tworzenia menu rozwijanego przy kategoriach. Zakładając, że chcecie osiągnąć taki efekt jak pokazał @TheL w dziale Zawartość/Nagłówek i stopka w sekcji Nagłówek ustawcie linki w takiej kolejności która pozwoli złamać menu w jednym konkretnym miejscu.

    Zrzut ekranu pokazujący działanie kodu załączam do mojej odpowiedzi.
    Do zapisu kodu pozwoliłem sobie użyć składni LESS a nie czystego CSS bo w mojej ocenie jest to trochę bardziej zwięzłe i czytelne.

    Po podwójnym znaku "/" znajdziecie komentarze których oczywiście nie trzeba używać ale nawet jak je wstawicie to system po wygenerowaniu kodu CSS je wyrzuci.

    Kod LESS:

    Kod:
    @media (min-width: 768px){ //ten zapis sprawia ze nie będziemy psuć wyglądu mobilnego
    
    .menu{
      .innermenu{
            box-shadow: inset 0 -50px 0 0 red; // ten fragment ustala tło drugiej linii a dokładniej robi cień wysokości 50px.
    
        .menu-list{
            height: auto; //zerujemy zapis mówiący o tym jakiej wysokości jest menu
            overflow: visible; //tu dodajemy zapis pozwalający zobaczyć to co wystaje poza standardowe menu
      
          li{     
            position: relative; //zmieniamy kontener do którego pozycjonuje się wysuwane menu
        
            &:nth-child(8){
              clear: left; // tu ustalamy po którym linku menu ma się wykonać załamanie
            }
          }
        }
        .parent{     
      
            &:hover{
              & > div{
                & > ul{
                  width: 200px; // ustalamy szerokość wysuniętego menu
                }
              }
            }
        }
      }
    }
    }
    
    Kod:
    // tu dodaje zapisy poprawiające menu na tabletach
    @media (max-width: 979px) and (min-width: 768px){
      .rwd {
        .menu {
          .innermenu {
                height: auto;
                border-top: 0;
                border-bottom: 0;
    
                li{
                  h3{
                    line-height: 50px;
                  }
                }
              .menu-list{
                li{
                  h3{
                    a{
                      padding: 0em 1.3em;
                    }
                  }
                }
              }
              .parent{
                :hover{
                  & > div{
                    & > ul{
                      top: 48px;
                    }
                  }
                }
              }
          }
        }
      }
    }
    
    I to koniec
     

    Załączone pliki:

    iisjah, Julita, TheL oraz 1 dodatkowa osoba lubi tego posta.
  12. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Sprawdź proszę rozwiązanie zaproponowane powyżej przez użytkownika: @flex , może w tym przypadku uzyskasz to czego chciałeś?

    @flex dzięki za opublikowanie rozwiązania na forum. Jestem przekonany, że przyda się dla potomnych :).
     
  13. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    niewiem juz jak to dodac :p
    moze ktos zlozy to w 1 kawalek? bo bardzo by mi sie przydal taki paseczek :)
     
  14. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    niewiem juz jak to dodac :p
    moze ktos zlozy to w 1 kawalek? bo bardzo by mi sie przydal taki paseczek :)
     
  15. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    @yankes tu nie ma jednego rozwiązania tylko 2 :)
     
  16. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    aha :) a ty nic nie wymysliles z twoim?
     
  17. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Użytkownik @flex poprawił trochę kod stworzony wcześniej przez @TheL

    @yankes - skorzystaj z kodu, który znajdziesz w poście użytkownika o nazwie @flex
     
  18. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    te 2 menu można powiedzieć są innego rodzaju rozwiązaniami i mogą być do czegoś innego stosowane, wszystko zależy od tego czego potrzebujemy
     
  19. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    no spoko costam jest ok, rozwiazanie wg flex, tylko jak zrobic zeby mozna bylo zrobic inna wysokosc niz innermenu?

    chcialbym zostawic innermnu normalnie, a pasek podspodem tlo-> kolor bialy np. wysokosc 50% gornego
     
  20. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    thel dalej nic ? :[[[[
     

Poleć forum znajomym