Menüanpassung für Touchgeräte
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:
[h3]Anpassung der Datei style_design.css[/h3]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:
[googlecode]#menu li ul {
position: absolute;[/googlecode]und ersetzen diesen Teil durch[googlecode]#menu li ul {
position: absolute;
display: none;[/googlecode]
2. Schritt: Etwas weiter unten in der Datei style_design.css suchen wir nach:[googlecode]#menu li.hover ul {
top: 100%;
}[/googlecode] und ersetzen diesen Bereich durch:[googlecode]#menu li.hover ul {
top: 100%;
display:block;
}[/googlecode]
3. Schritt: In der geöffneten Datei style_design.css suchen wir nach:
[googlecode]#menu li li ul,
#menu li.hover li ul {
top: -9999px;
left: 198px;
}[/googlecode]und ersetzen diesen Teil durch[googlecode]#menu li.hover li ul {
top: -9999px;
left: 198px;
display: none;
}[/googlecode]
4. Schritt: Nun suchen wir nach[googlecode]#menu li.hover li.hover ul {
top: 0;
}[/googlecode]und ersetzen diese Zeilen durch:[googlecode]#menu li.hover li.hover ul {
top: 0;
display: block;
}[/googlecode]
5. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.
[h3]Anpassung der Datei style_menu.css[/h3]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:[googlecode]#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;
}[/googlecode]
2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.
[h3]Anpassung der Datei style_menu.css[/h3]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:[googlecode]#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;
}[/googlecode]
2. Schritt: Bearbeitete Datei abspeichern und die Webseite veröffentlichen.
[h3]Anpassung der Datei style_menu.css[/h3]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:[googlecode]#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;
}[/googlecode]
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;
}
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.