PORADNIK Dodatkowe menu rozwijane w sklepie Click Shop

Pojawiały się pytania o dodatkowe menu rozwijalne w sklepie, oto moje rozwiązanie:

We własnym stylu wklejamy:

Code:

#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:

Code:

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

Przykład:

Moduł wstawiamy w miejsce pod nagłówkiem strony.

 

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 To mój zmodyfikowany szablon po prostu wariuje

 

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 .

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

 

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.

 

Mam pytanie jak zrobić aby nazwy tych kategorii były wyrównane do lewej, a nie wycentrowane?
Ewentualnie z niewielkim marginesem od lewej...

 

@spalk powinno wystarczyć dodanie jednego małego parametru float:left do pierwszej linijki kodu CSS:

Code:

float:left

Pierwsza linijka kodu CSS będzie wtedy wyglądała przykładowo tak:

Code:

#menunew {font-family: arial, tahoma; padding: 0 0px 0; margin: 0 auto; float:left; display: table; overflow: hidden; font-size: 15px; background: #3c3c3c;}

 

niewiem czy ktos testowal te mnenu ale nie za bardzo dziala bo sie dzieje tak


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

 

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.

 

czekamy ;]

 

jak praca nad menu? udalo sie naprawic zeby przylegalo na stale do logo-baru?

 

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:

Code:

@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
            }
          }
        }
    }
  }
}
}

Code:

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

 

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 .

 

niewiem juz jak to dodac
moze ktos zlozy to w 1 kawalek? bo bardzo by mi sie przydal taki paseczek

 

niewiem juz jak to dodac
moze ktos zlozy to w 1 kawalek? bo bardzo by mi sie przydal taki paseczek

 

@yankes tu nie ma jednego rozwiązania tylko 2

 

aha a ty nic nie wymysliles z twoim?

 

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

 

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

 

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

 

thel dalej nic ? :[[[[