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 Nowe górne menu rozwijalne z produktami

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 29 Styczeń 2016.

  1. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Menu zadziała poprawnie jeśli włączymy wyświetlanie kategorii i podkategorii, aktualnie szukam gdzie to się robi.

    Jako, że powstało już menu boczne https://forum.home.pl/threads/nowe-menu-boczne-rozwijane-na-boki.767/ , teraz czas na menu górne rozwijalne z produktami :)

    Efekt:
    menu2a.png

    menu2b.png


    Więcej niż 3 podkategorie w kategorii nie testowałem jednak powinno to zadziałać nawet na większej ich ilości (jednak tego nie polecam bo utrudni to obsługę sklepu)

    Jak to zrobić?

    Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Moduły
    Edytujemy moduł menu i wyłączamy pokazywanie ilości produktów (niestety to jest jedyna niedogodność, z ilością w tej chwili nie działa). Następnie przenosimy menu w pozycję pod nagłówek.

    Następnie
    Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Własny styl CSS dodajemy:
    Kod:
    #cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url("images/seperator.gif") bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url("images/hover.png") bottom center no-repeat;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
   /*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('images/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('images/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul ul {
  left: -9999px;
  top: 0;
}
#cssmenu ul ul li:hover > ul {
  left: 100%;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu > ul > li {
  position: relative;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
  left: auto;
  text-align: right;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu.align-right ul ul li:hover > ul {
  left: auto;
  right: 100%;
}
    Następnie:
    Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Edycja zaawansowana
    edytujemy plik: Menu/box.tpl
    czyścimy jego zawartość i wklejamy:

    Kod:
    <div class="large standard boxhead" >
<span>{$boxNs->$box_id->title|escape}</span>
</div>
<div class="innerbox" id='cssmenu'>
{if $boxNs->$box_id->text}<h5 class="boxintro">{$boxNs->$box_id->text}</h5>{/if}
{if 1 == $boxNs->$box_id->format}
<ul>
{else}
<ul>
{/if}
{$boxNs->$box_id->list}
{if 1 == $boxNs->$box_id->link_news}<li id="category_novelties"><a href="{$boxNs->$box_id->url_new}" title="{translate key='New products'}" class="novelties"><img src="{baseDir}/public/images/1px.gif" alt="" class="px1">{translate key="New products"}</a></li>{/if}
{if 1 == $boxNs->$box_id->link_promotions}<li id="category_promo"><a href="{$boxNs->$box_id->url_promotions}" title="{translate key='Products on sale'}" class="promo"><img src="{baseDir}/public/images/1px.gif" alt="" class="px1">{translate key="Products on sale"}</a></li>{/if}
</ul>
</div>
    Uwaga!! Jeśli ktoś już robił poprzednie menu podane na początku nie musi modyfikować tego pliku.


    Gotowe :) Powodzenia.

    UWAGA!!
    Jeśli ktoś edytował już menu powinien zwrócić uwagę na to co robi. Polecam również pozbyć się wszystkich stylów modyfikujących kolory, czcionki i inne elementy menu wstawionych przez Was przed instalacją tego menu.
     
    Ostatnia modyfikacja: 30 Styczeń 2016
    TheL, 29 Styczeń 2016
    #1
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Wersja bardziej skomplikowana:
    menu3.png
    czyli posiadająca strzałeczki i separatory:

    Wykonujemy to co powyżej lecz używamy stylu:
    Kod:
    #cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url("/skins/user/rwd_clickshop_2/images/user/seperator.gif") bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url("/skins/user/rwd_clickshop_2/images/user/hover.png") bottom center no-repeat;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
   /*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('/skins/user/rwd_clickshop_2/images/user/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('/skins/user/rwd_clickshop_2/images/user/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul ul {
  left: -9999px;
  top: 0;
}
#cssmenu ul ul li:hover > ul {
  left: 100%;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu > ul > li {
  position: relative;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  right: 0;
  left: auto;
  text-align: right;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu.align-right ul ul li:hover > ul {
  left: auto;
  right: 100%;
}
    teraz wygrywamy do plików graficznych 4 pliki

    hover.png hover_sub.png seperator.gif sub_sep.gif


    I teraz najważniejsze, w stylu mamy ścieżkę do plików graficznych w postaci: /skins/user/rwd_clickshop_2/images/user/ jeśli ona nam nie zadziała musimy sobie dopasować swoją, ja tu podaję pełną ścieżkę http://nazwasklepu itd.

    Efekt jest fajny :)

    ps. w poprzednim cssie też są odnośniki do obrazków jednak specjalnie nie zwróciłem na to uwagi, aby pokazać menu w wersji prostszej, a nie modyfikować CSSa.

    Zaznaczam, że nie ja jestem autorem tych menu. Są to dostosowane do sklepu menu z http://cssmenumaker.com, głównie dostosowany jest plik Menu/box.tpl
     
    TheL, 30 Styczeń 2016
    #2
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Polecam też zwrócić uwagę na styl powodujący wyświetlanie takiego menu:
    menu4.png

    Kod:
    @charset "UTF-8";
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu > ul {
  position: relative;
  z-index: 597;
}
#cssmenu > ul li {
  float: left;
  min-height: 1px;
  line-height: 1.3em;
  vertical-align: middle;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu > ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu > ul ul li {
  float: none;
}
#cssmenu > ul ul ul {
  top: 1px;
  left: 99%;
}
#cssmenu > ul li:hover > ul {
  visibility: visible;
}
/* Align last drop down RTL */
#cssmenu > ul > li.last ul ul {
  left: auto !important;
  right: 99%;
}
#cssmenu > ul > li.last ul {
  left: auto;
  right: 0;
}
#cssmenu > ul > li.last {
  text-align: right;
}
/* Theme Styles */
#cssmenu > ul {
  border-top: 4px solid #3fa338;
  font-family: Calibri, Tahoma, Arial, sans-serif;
  font-size: 14px;
  background: #1e1e1e;
  background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
  background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
  background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
  width: auto;
  zoom: 1;
}
#cssmenu > ul:before {
  content: '';
  display: block;
}
#cssmenu > ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu > ul li a {
  display: inline-block;
  padding: 10px 22px;
}
#cssmenu > ul > li.active,
#cssmenu > ul > li.active:hover {
  background-color: #3fa338;
}
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:active,
#cssmenu > ul > li > a:visited {
  color: #ffffff;
}
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul ul ul {
  top: 0;
}
#cssmenu > ul li li {
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
  background-color: #F5F5F5;
}
#cssmenu > ul > li.hover,
#cssmenu > ul > li:hover {
  background-color: #3fa338;
  -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
#cssmenu > ul a:link,
#cssmenu > ul a:visited {
  color: #9a9a9a;
  text-decoration: none;
}
#cssmenu > ul a:hover {
  color: #9a9a9a;
}
#cssmenu > ul a:active {
  color: #9a9a9a;
}
#cssmenu > ul ul {
  border: 1px solid #CCC \9;
  -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
  width: 150px;
}
    W teorii każdy styl z tej strony http://cssmenumaker.com powinien teraz po mojej modyfikacji pliku Menu/box.tpl zadziałać. Ważne abyśmy stosowali menu takie w jakiej pozycji mamy Moduł menu aktualnie wstawiony.
     
    TheL, 30 Styczeń 2016
    #3
  4. doleq

    doleq Zawodowiec

    Wiadomości:
    86
    Docenione treści:
    7
    Cześć a jak zrobić Mega Menu? :)
     

    Załączone pliki:

    doleq, 20 Grudzień 2016
    #4
    emin lubi to.

Poleć forum znajomym