Screenshot des modifizierten Yuma-Designs

In einigen web to date Designs ist es kaum möglich auf Geräten wie dem iPhone oder iPad die Dropdown-Menüs anzeigen zu lassen. Behoben werden kann dieses Problem in den meisten Fällen recht einfach durch das Hinzufügen von display: none; bei geschlossenem Zustand und display: block; beim "Darüberfahren" oder "Berühren" des Menüpunktes in der ersten Ebene.

Anpassung der Datei style_menu.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Shop to Date 8.0 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\DATA BECKER\shop to date 8 pro\designs\Aurora

1. Schritt:
In der geöffneten Datei style_menu.css suchen wir (fast am Ende der Datei) nach:

.menu ul {
margin-bottom:-5000px;
}

und ersetzen diesen Teil durch

.menu ul {
display: none;
}


2. Schritt: Am Ende (ganz unten) der style_menu.css fügen wir Folgendes ein.

.menu li.drop:hover ul,
.menu li.drop:hover ul {
display: block;
}


3. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.

Anpassung der Datei style_design.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Siquando Shop 8 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\SIQUANDO\Web 8\designs\Baxley

1. Schritt:
In der geöffneten Datei style_design.css suchen wir nach:

#menu li ul {
position: absolute;

und ersetzen diesen Teil durch

#menu li ul {
position: absolute;
display: none;


2. Schritt: Etwas weiter unten in der Datei style_design.css suchen wir nach:

#menu li.hover ul {
top: 100%;
}

und ersetzen diesen Bereich durch:

#menu li.hover ul {
top: 100%;
display:block;
}


3. Schritt: In der geöffneten Datei style_design.css suchen wir nach:

#menu li li ul,
#menu li.hover li ul {
top: -9999px;
left: 198px;
}

und ersetzen diesen Teil durch

#menu li.hover li ul {
top: -9999px;
left: 198px;
display: none;
}


4. Schritt: Nun suchen wir nach

#menu li.hover li.hover ul {
top: 0;
}

und ersetzen diese Zeilen durch:

#menu li.hover li.hover ul {
top: 0;
display: block;
}


5. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.

Anpassung der Datei style_menu.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Shop to Date 8.0 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\DATA BECKER\shop to date 8 pro\designs\Duality

1. Schritt:
Am Ende der geöffneten Datei style_menu.css muss nur Folgendes eingefügt werden:

#menu li ul,
#menu li li ul,
#menu li:hover li ul {
display: none;
}
#menu li:hover ul,
#menu li li:hover ul {
display: block;
}


2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.

Anpassung der Datei style_menu.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Shop to Date 8.0 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\DATA BECKER\shop to date 8 pro\designs\Gil

1. Schritt:
Am Ende der geöffneten Datei style_menu.css muss nur Folgendes eingefügt werden:

#navbox li ul,
#navbox li li ul,
#navbox li:hover li ul {
display: none;
}
#navbox li:hover ul,
#navbox li li:hover ul {
display: block;
}


2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.

Anpassung der Datei style_menu.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Shop to Date 8.0 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\DATA BECKER\shop to date 8 pro\designs\Seyffenbrandt

1. Schritt:
Am Ende der geöffneten Datei style_menu.css muss nur Folgendes eingefügt werden:

#menu li ul,
#menu li li ul,
#menu li.hover li ul {
display: none;
}

#menu li.hover ul,
#menu li.hover li.hover ul {
display: block;
}


2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.

Eine angepasste Demo finden Sie auf seyffenbrandt.web2date-designs.de .

Anpassung der Datei style_design.css

Der Pfad zu der Datei kann abhängig von dem Installationsorder und der verwendeten Shop to Date 8.0 Version variieren. Üblich sind Pfade wie C:\Program Files (x86)\DATA BECKER\shop to date 8 pro\designs\Yuma

1. Schritt:
In der geöffneten Datei style_design.css suchen wir (fast am Ende der Datei) nach:

ul#megadrop li ul {
width: 800px;
height: 260px;
position: absolute;
overflow: hidden;
top: 440px;
left: 0;
background-repeat: no-repeat;
list-style: none;
padding: 0;
margin: 0;
}

und ersetzen diesen Teil durch

ul#megadrop li ul {
width: 800px;
height: 260px;
position: absolute;
overflow: hidden;
top: 440px;
left: 0;
background-repeat: no-repeat;
list-style: none;
padding: 0;
margin: 0;
display: none;
}

ul#megadrop li:hover ul,
ul#megadrop li:active ul {
display: block;
}


2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.


Feedback

Sie haben Fragen, Anregungen oder eine Kritik? Dann nutzen Sie unsere Kommentar-Funktion. Natürlich würden wir uns auch über eine kleine PayPal-Spende freuen.

Dieter schrieb am 20.02.2015 um 14:18  | Website

Vielen Dank für Deine Style-Anpassungen, jetzt klappt die Ansicht auch mit IPad und Co. Da spende ich gerne!

Michael schrieb am 10.11.2014 um 14:01  | Website

Hallo Thomas, danke für die Anpassung im Baxley Design. Darf ich nochmal ganz doof nachfragen ob ich die Änderungen direkt in Siquando vornehme oder öffne ich die Dateien im editor und ändere sie dort - oder welches Programm nutze ich zum ändern der Dateien? Ich nehme an, nach dem ändern übertrage ich die Website dann vollständig und nicht inkrementell? Gruss Michael
Auf vollständig umzustellen kann nicht schaden, ich bin mir in dem Fall allerdings nicht sicher ob es wirklich notwendig ist. Die Dateien änderst du lokal in dem Ordner Baxley, bei Siquando Shop 8 wäre der vollständige Pfad zur Datei C:\Program Files (x86)\SIQUANDO\Web 8\designs\Baxley\style_design.css. Welchen Editor du verwendest bleibt dir überlassen, ich persönlich arbeite mit Sublime Text 3, dir empfehle ich aber eher Notepad++

Michael schrieb am 10.11.2014 um 07:54  | Website

Hallo Thomas, ich nutze auf einer anderen Website das Design Baxley. Dort funktioniert leider iOS Mouseover für die Menüs nicht. Kannst Du mir einen Tip geben ob und wie ich das auch bei dem Design zum laufen bringe? Danke und Gruß Michael
Hallo Michael, die Anleitung für das Design Baxley Template habe ich soeben hinzugefügt.

Jürg S. schrieb am 28.05.2014 um 18:01  | Website

Hat prima geklappt für Seyffenbrandt. Merci! Patch geht auch beim Design Kissimmee :-)

Georg F. schrieb am 20.09.2013 um 18:32

Hallo Thomas, könnest eine Anpassung für das Template Seyffenbrandt erstellen?
Grüsse Georg
Hallo Georg,
habe die Anleitung für das Design Seyffenbrandt (am 27.09.2013) hinzugefügt.

Thomas K. schrieb am 09.09.2013 um 18:08  | Website

Weitere Anleitungen für einige Menüs folgen in Kürze, falls Probleme bei der Anpassung auftreten sollten können Sie gerne einen Kommentar hinzufügen.