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 400
    Docenione treści:
    532
    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
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    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
     
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    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.
     
  4. doleq

    doleq Zawodowiec

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

    Załączone pliki:

    emin lubi to.

Poleć forum znajomym