Ich möchte diesen Bereich aber ein wenig anschaulicher und übersichtlicher gestalten. Einfügen würde ich gerne so ein ausklappbares Menü, ähnlich diesem (nur noch simpler, ohne Schick Schnack):
Einen js/html code habe ich für meine Vorstellung. In Dreamweaver läuft auch alles so wie ich es haben will. Füge ich denn Code jedoch innerhalb Oxid in die CMS Seite ein (http://postimg.org/image/wr9fvkk6b/), passiert nichts, sprich JavaScript hat garkeinen Effekt.
Wie gesagt ich wirklich neu auf diesem Gebiet. Wäre nett falls mir einer von euch eine Antwort oder Anregung geben könnte. Gerne auch in Laien-Sprache
Vielen vielen Dank im Vorfeld. Ihr seid die Besten.
Hallo Rafa,
obwohl mit JavaScript viel möglich ist würde ich an deiner stelle Tabs mit Pure CSS3 suchen. Im Notfalls brauchst du nur 3-5 Zeilen JS Kode damit das ding läuft. Google ist dein Freund, suche nach “Pure CSS3 Tab” oder eben “CSS Tab”
ein ganzer einfacher Code der komplett das ist was ich brauche ist z.B. dieser hier:
<script type="text/javascript">
function treeMenu_init(menu, data) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
if(array.length > 0 && array[0] == i) {
array.shift();
}
}
}
}
function treeMenu_handleClick(event) {
if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}
function treeMenu_getClasses(element) {
if(element.className) {
return element.className.match(/[^
\r]+/g);
}
else {
return new Array(0);
}
}
function treeMenu_contains(array, element) {
for(var i = 0; i < array.length; i++) {
if(array[i] == element) {
return true;
}
}
return false;
}
function treeMenu_store(menu) {
var result = new Array();;
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
result.push(i);
}
}
return result.join(" ");
}
</script>
<style type="text/css">
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
Häufig gestellte Fragen zum Tehma Bestellung
Wie läuft eine Bestellung ab?
<body onLoad="treeMenu_init(document.getElementById('menu'), '')">
<ul id="menu">
<li>1. Bestellung
<ul>
<li>Wenn Sie das gewünschte Produkt gefunden haben, können Sie es in den Warenkorb legen. Haben Sie so alle gewünschten Artikel gesammelt, können Sie die Bestellung abschliessen. Klicken Sie dazu im oberen Bereich auf "Warenkorb" . Hier können Sie noch Ihre Lieferanschrift und Zahlungsweise wählen. Sie können bis zur Absendung Ihrer Bestellung im letzten Bestellschritt Ihre eingegebenen Daten immer noch verändern. Erst wenn Sie die Daten auf der letzten Seite überprüft haben und die Bestellung absenden wird diese durch uns bearbeitet.</li>
</ul>
</li>
<li>2. Bestätigung
<ul>
<li>Sie erhalten automatisch nach Ihrer Bestellung eine Bestätigungsmail über Ihre Bestellung in der der Artikel, der von Ihnen gewählte Versand, der Versandpreis und die Art der Zahlungsweise zu sehen sind. Es fallen keine weiteren Versandkosten oder Servicekosten für Sie an als in der Auftragsbestätigung ausgewiesen (ausgenommen 2€ Servicegebühr bei Nachnahme)</li>
</ul>
</li>
<li>3. Lieferung
<ul>
<li>Bestellungen werden in der Regel 1-3 Tage nach Zahlungseingang versendet. Fahrräder erhalten Sie in einem speziellen Fahrradkarton durch unseren Logistikpartner DHL. Selbstverständlich ist die Rechnung die auch als Gewährleistungsnachweis dient der Lieferung beiliegend.</li>
</ul>
</li>
Füge ich das halt so in die CMS-Seite ein, zeigt er mir alles untereinander ein. Öffne ich es im Browser funktioniert es.
@ markus26
Kannst du evtl. ein wenig konkreter werden? Ich habs mal eingegeben und komm nicht wirklich weiter. Evtl. kannst du dich ja an dem Code Beispiel oben orientieren.
