Menüanpassung für Touchgeräte - siquando-designs.de

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.

Aurora - Dropdown-Menü bei iOS-Geräten

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.

Baxley - Hover-Menu-Fix für Touch-Geräte

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.

Duality - Menüanpassung für iOS-Geräte

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.

Gil - Menüanpassung für iOS-Geräte

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.

Seyffenbrandt - MouseOver-Menü

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 .

Yuma - Dropdown-Menü bei iOS-Geräten

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.