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

Nowe menu boczne rozwijane na boki

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.

    Użytkownik @yankes zapytał czy da się zrobić takie menu http://cssmenumaker.com/menu/flat-flyout-menu więc zrobiłem :D (bez plusików bo do tego trzeba więcej zabawy) To menu po prostu dopasowałem na potrzeby sklepu. Da się tu zastosować prawie każde menu oparte o css.

    Menu wygląda tak:

    mnu.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
    Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Własny styl CSS dodajemy:

    Kod:
    @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
    @charset "UTF-8";
    #cssmenu {
      padding: 0;
      margin: 0;
      border: 0;
      line-height: 1;
    }
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #cssmenu ul {
      position: relative;
      z-index: 597;
      float: left;
    }
    #cssmenu ul li {
      float: left;
      min-height: 1px;
      line-height: 1em;
      vertical-align: middle;
      position: relative;
    }
    #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: 0px;
      z-index: 598;
      width: 100%;
    }
    #cssmenu ul ul li {
      float: none;
    }
    #cssmenu ul ul ul {
      top: -2px;
      right: 0;
    }
    #cssmenu ul li:hover > ul {
      visibility: visible;
    }
    #cssmenu ul ul {
      top: 1px;
      left: 99%;
    }
    #cssmenu ul li {
      float: none;
    }
    #cssmenu ul ul {
      margin-top: 1px;
    }
    #cssmenu ul ul li {
      font-weight: normal;
    }
    /* Custom CSS Styles */
    #cssmenu {
      width: 100%;
      background: #333333;
      font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
      zoom: 1;
      font-size: 12px;
    }
    #cssmenu:before {
      content: '';
    //* display: block;*//
    }
    #cssmenu:after {
      content: '';
      display: table;
      clear: both;
    }
    #cssmenu a {
      display: block;
      padding: 15px 20px;
      color: #ffffff;
      text-decoration: none;
      text-transform: uppercase;
    }
    #cssmenu > ul {
      width: 100%;
    }
    #cssmenu ul ul {
      width: 200px;
    }
    #cssmenu > ul > li > a {
      border-right: 4px solid #1b9bff;
      color: #ffffff;
    }
    #cssmenu > ul > li > a:hover {
      color: #ffffff;
    }
    #cssmenu > ul > li.active a {
      background: #1b9bff;
    }
    #cssmenu > ul > li a:hover,
    #cssmenu > ul > li:hover a {
      background: #1b9bff;
    }
    #cssmenu li {
      position: relative;
    }
    #cssmenu ul li.has-sub > a:after {
      content: '+';
      position: absolute;
      top: 50%;
      right: 15px;
      margin-top: -6px;
    }
    #cssmenu ul ul li.first {
      -webkit-border-radius: 0 3px 0 0;
      -moz-border-radius: 0 3px 0 0;
      border-radius: 0 3px 0 0;
    }
    #cssmenu ul ul li.last {
      -webkit-border-radius: 0 0 3px 0;
      -moz-border-radius: 0 0 3px 0;
      border-radius: 0 0 3px 0;
      border-bottom: 0;
    }
    #cssmenu ul ul {
      -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;
    }
    #cssmenu ul ul {
      border: 1px solid #0082e7;
    }
    #cssmenu ul ul a {
      font-size: 12px;
      color: #ffffff;
    }
    #cssmenu ul ul a:hover {
      color: #ffffff;
    }
    #cssmenu ul ul li {
      border-bottom: 1px solid #0082e7;
    }
    #cssmenu ul ul li:hover > a {
      background: #4eb1ff;
      color: #ffffff;
    }
    #cssmenu.align-right > ul > li > a {
      border-left: 4px solid #1b9bff;
      border-right: none;
    }
    #cssmenu.align-right {
      float: right;
    }
    #cssmenu.align-right li {
      text-align: right;
    }
    #cssmenu.align-right ul li.has-sub > a:before {
      content: '+';
      position: absolute;
      top: 50%;
      left: 15px;
      margin-top: -6px;
    }
    #cssmenu.align-right ul li.has-sub > a:after {
      content: none;
    }
    #cssmenu.align-right ul ul {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: -100%;
      z-index: 598;
      width: 100%;
    }
    #cssmenu.align-right ul ul li.first {
      -webkit-border-radius: 3px 0 0 0;
      -moz-border-radius: 3px 0 0 0;
      border-radius: 3px 0 0 0;
    }
    #cssmenu.align-right ul ul li.last {
      -webkit-border-radius: 0 0 0 3px;
      -moz-border-radius: 0 0 0 3px;
      border-radius: 0 0 0 3px;
    }
    #cssmenu.align-right ul ul {
      -webkit-border-radius: 3px 0 0 3px;
      -moz-border-radius: 3px 0 0 3px;
      border-radius: 3px 0 0 3px;
    }
    
    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>
    
    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
    yankes i Mariusz lubią to.
  2. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    Dzieki wielkie mistrzu nareszcie troche skrocimy MENU :p

    tylko jedna sprawa menu nie rozwija sie po najechaniu ;/ tylko klikam kategorie, odswieza sie strona i dopiero 1 dzial sie rozwija a reszta z menu dalej nieruchoma...


    dodam ze na nowej nie edytowanej skorce tez tak jest.. ;/
     
    Ostatnia modyfikacja: 30 Styczeń 2016
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    muszę jeszcze sprawdzić odświeżanie menu bo faktycznie styl wczytuje dopiero po jego wykonaniu, zawsze trafi się na jakiś problem :)
     
  4. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    nic nie rozkminiles? z tego co widze to w JS brakuje sktypttu bo do innermenu jest i tam dziala =)
     
  5. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    temat jest prawie ogarnięty, w tej chwili na kawałek przerwałem nad nim pracę, muszę wykonać inny projekt związany ze sklepem który prawie kończę :)
     
  6. yankes

    yankes Artysta

    Wiadomości:
    279
    Docenione treści:
    15
    nic nie ruszylo z menu? :D
     

Poleć forum znajomym