Horizontales Menü in Responsive Template

[RobtheTop]

Mhhh
Ich war grade nochmal auf deiner seite hpzeller und hab gesehen, dass es bei dir einwandfrei funktioniert.
Verdammt... was hab ich denn da gemacht?

[RobtheTop]

Oh man, habs hinbekommen.
Ich hatte vor kurzen den "TPLManager" installiert und dort musste ich unter "Fullcontent" alles auf "nein" stellen.
jetzt gehts.
Ich hoffe jedenfalls.
Bevor ich jetzt "Juhu" rufe, teste ich erstmal jede Seite.

Edit:
Ich frage mich gerade, ob die ganzen Anpassungen überhaupt nötig waren, oder ob ich das alles oder jedenfalls das meiste über diesen Manager hätte realisieren können.

[awids]

Mein Manager nimmt schon einiges an Arbeit ab, was das Aktivieren bzw. Deaktivieren von diversen Bereichen angeht und erlaubt auch, spielend leicht die Änderungen wieder zurück zu nehmen, aber trotzdem ist noch einiges auf deiner ToDo-Liste geblieben. (Irgendwann programmiere ich bestimmt auch mal die "eierlegende Wollmilchsau", aber freut mich, dass dir meine Erweiterung nützlich sein konnte.)

[RobtheTop]

Ich habe den Manager bisher noch gar nicht richtig genutzt, fand aber, dass er vom Funktionsumfang sehr nützlich sein kann. Ich bin immer noch am Template dran, wenn auch wie es scheint in den letzten Zügen, aber den Manager sehe ich mir als nächstes an, weil noch etwas an Content fehlt wo ich hoffe, dass er mit helfen kann. Erstmal das Template, dann die E-Mail Vorlagen und dann geht's an den Content. Ich habe gesehen, dass der Manager nach der Installation irgendwas an meinem Footer gemacht. Jedenfalls sieht er anders als vorher aus. Ursprünglich waren Platzhalter Grafiken für Versandunternehmen etc. enthalten, die aber nach der Installation weg waren. Aber ich denke Mal, dass man die auch irgendwo wieder einblenden kann. Wie auch immer das eigentliche Thema ist an dieser Stelle erledigt.
Ich danke euch für eure Hilfe.

[Viol]

Wenn du willst kann ich dir den Code hier posten.
Gruss
Hanspeter

Wenn Du es magst, ich würde mir den Code gerne einmal ansehen

[hpzeller]

Hallo Viol,

gerne, nachfolgend der Code. Der Code bezieht sich auf das tpl_modified_responsive Standardtemplate aus der Shopversion 2.0.5.1 rev 12725

Füge in der Datei /templates/tpl_modified_responsive/css/general_bottom.css.php nach folgender Codezeile

Code: PHP  [Auswählen]

    DIR_TMPL_CSS.'jquery.sidebar.css',

diese Codezeile ein.

Code: PHP  [Auswählen]

    DIR_TMPL_CSS.'jquery.sidebar.full.css',

Füge in der Datei /templates/tpl_modified_responsive/source/boxes.php vor folgender Codezeile

Code: PHP  [Auswählen]

  if (!in_array(basename($PHP_SELF), $fullcontent)) {

diese Codezeile ein.

Code: PHP  [Auswählen]

$fullcontent = [];

Erstelle die Datei /templates/tpl_modified_responsive/javascript/extra/jquery.sidebar.full.js.php und fülle sie mit folgendem Inhalt.

Code: PHP  [Auswählen]

<?php
  /* --------------------------------------------------------------
   $Id: jquery.sidebar_full.js.php  2021-03-17 hpzeller $
   
   Copyright (c) 2021 hpzeller [info@hpzeller.com]
   --------------------------------------------------------------
   Released under the GNU General Public License
   --------------------------------------------------------------*/
?>
<script>
$("#col_right #content_navbar .contentnavigation").prepend('<li class="sidebar_btn_full"><span id="sidebar_marker"></span><a href="#"><i class="fas fa-bars"></i><span class="cn_nomobile_text">Men&uuml;</span></a></li>');
$(function(){
  $(".box_category_header").append('<a class="sidebar_btn_full_x" href="#"><i class="fas fa-times"></i></a>');
  $(document).on("click", ".sidebar_btn_full, .sidebar_btn_full_x", function(){
    $(".sidebar_btn_full a i").toggleClass("fa-bars fa-times");
    $("#col_left").animate({width:'toggle'},200);  
    $("#col_right .col_right_inner").toggleClass("col_right_trans");
  });
});
</script>

Erstelle die Datei /templates/tpl_modified_responsive/css/jquery.sidebar.full.css und fülle sie mit folgendem Inhalt.

Code: CSS  [Auswählen]

.sidebar_btn_full {
  display: none;
}

.sidebar_btn_full a {
  font-weight: 800 !important;
  text-transform: uppercase;
}

.sidebar_btn_full a .fas {
  vertical-align:-1px;
}

.col_right_trans {
  margin-left: 285px !important;
}


@media only screen and (min-width: 986px) {

  #col_left {
    display: none;
  }

  .sidebar_btn_full_x {
    display: inline-block;
    float: right;
    font-size: 24px;
    line-height: 44px;
    color: #fff !important;
    cursor: pointer;  
  }
 
  .sidebar_btn_full_x:hover {
    color: #b0377e !important;  
  }

  .sidebar_btn_full {
    display: block;  
  }

}

@media only screen and (max-width: 985px) {

  #col_right .col_right_inner {
    margin-left: 0px !important;    
  }

  #col_left {
    display: block !important;
  }

  .sidebar_btn_full_x {
    display: none;
  }

  .sidebar_btn_full {
    display: none;  
  }

}

#col_right .col_right_inner {
  margin-left: 0px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;        
}

Feedback erwünscht, Gruss
Hanspeter

[hpzeller]

Hallo viol,

ich habe leider festgestellt, dass so wie ich den Code gepostet habe der Seitenaufbau im Browser etwas hackelig vor sich geht. Das liegt daran, dass in der Datei /templates/tpl_modified_responsive/css/jquery.sidebar.full.css folgende, ganz am Ende stehende CSS Regel, vom Browser zu spät gelesen bzw. ausgeführt wird, diese Regel musst du dort entfernen und sie stattdessen ganz am Ende der Datei  /templates/tpl_modified_responsive/stylesheet.css einfügen.

Code: CSS  [Auswählen]

#col_right .col_right_inner {
  margin-left: 0px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;      
}

Hinweis: Der Code "$fullcontent = [];" der in die Datei /templates/tpl_modified_responsive/source/boxes.php eingefügt werden soll ist optional, er bewirkt das auf sämtlichen Seiten der Menübutton angezeigt wird, lässt man ihn weg, wird der Menübutton nur auf den Seiten welch nicht im Array "$fullconten" enthalten sind angezeigt.

Noch ein Hinweis: Beim testen des Codes solltest du im Admin Kompression und Caching deaktivieren.

Gruss
Hanspeter

[hpzeller]

Nachtrag:

Hier -> https://hpzeller.com/modified2051/ kannst du sehen wie das Ergebnis aussehen sollte.

Gruss
Hanspeter

[RobtheTop]

Krass. Wie schön smooth dein Menü auffährt. Wie bekomme ich das hin? Meinst du ich kann meine Regel auch irgendwie woanders einfügen, dass sie früher gelesen wird? Ich habe leider alles selbst angepasst und kann deine Variante wahrscheinlich ohne alles wieder zu ändern nicht einfach nutzen, daher wäre ich für jeden Tip von dir dankbar, ein ähnliches Ergebnis zu bekommen.

[Viol]

Hallo Hanspeter,

ich habe es nun eingebaut und es funktioniert wunderbar. 

[hpzeller]

Schön wenn es funktioniert, einen Tipp hätte ich dir aber noch.

In der Datei /templates/tpl_modified_responsive/css/jquery.sidebar.full.css solltest du die folgenden Regelsätze

Code: CSS  [Auswählen]

  .sidebar_btn_full_x {
    display: inline-block;
    float: right;
    font-size: 24px;
    line-height: 44px;
    color: #fff !important;
    cursor: pointer;  
  }
 
  .sidebar_btn_full_x:hover {
    color: #b0377e !important;  
  }

mit diesen ersetzten, damit das X zum schliessen des Menüs sichtbar wird.

Code: CSS  [Auswählen]

  .sidebar_btn_full_x {
    display: inline-block;
    float: right;
    font-size: 24px;
    line-height: 44px;
    color: #feb570 !important;
    cursor: pointer;  
  }
 
  .sidebar_btn_full_x:hover {
    color: #ef8318 !important;  
  }

Nachtrag:
Ich glaube meine Antwort #21 hast du nicht- oder nicht richtig ausgeführt.

Gruss
Hanspeter

[hpzeller]

Hallo RobtheTop,

wie ich schon in meiner Antwort #11 geschrieben habe kann ich dir keinen Tipp bezüglich ruckelfreier Animation geben. Einen Vorschlag kann ich dir aber noch machen, die Animation quasi deaktivieren kannst du in dem du in der Datei /templates/tpl_modified_responsive/javascript/jquery.sidebar.min.js den Wert "300" (kommt acht mal vor) auf "3" setzt, danach wird das Menü instantan nach klick auf den Menübutton angezeigt. Wenn in deinem Shop danach immer noch Verzögerungen auftreten wird das wahrscheinlich an CSS Regeln liegen welche du eingebaut hast um die Menü Animation zu steuern.

PS:
Stört es dich nicht, dass nach dem Einblenden des Menüs der Rest des Bildschirms verschoben und gesperrt ist. Auf dem Smartphone ist das ja ok, weil da das Menü praktisch den ganzen Bildschirm einnimmt, aber auf dem Desktop schränkt es den Shopbesucher meiner Meinung nach nur unnötig ein.

Gruss
Hanspeter

[RobtheTop]

Doch, du hast vollkommen recht. Das stört mich ungemein.
Ich versuche jetzt doch mal deinen Code einzubauen. Ich hoffe das verträgt sich mit dem TPLManager von Awids.
Danke dir.

[Viol]

Ich glaube meine Antwort #21 hast du nicht- oder nicht richtig ausgeführt.

Hm, habe das gerade nochmal kontrolliert. Hatte ich in der jquery.sidebar.full.css entfernt in die stylesheet.css eingefügt.

[RobtheTop]

Habs auch eingebaut, aber direkt wieder gelöscht. Ich habe schon zu viel an meinem Template geändert, dass es nicht wollte, wie es sollte. ich hatte den Menü-Button plötzlich 2 mal und musste um die Kategorieen zu sehen, alle beide klicken.

Aber vielleicht kannst du mir sagen, was ich machen muss, damit der Rest des Shops weiterhin klickbar bleibt, wenn das Menü offen ist.