Hallo Zusammen
Seit ca. 3 Wochen versuche ich eine Homepage aufzubauen. Zur Zeit bin ich das Menü am erstellen.
Ich muss zugeben, dass ich absoluter Neuling bin und versuche mich durchzulesen.
Folgenden Code habe ich im Setup drin.
NAVI= HMENU
NAVI {
special = directory
special.value = 1
1 = TMENU
1 {
wrap = <ul class="nav-ebene-eins">|</ul>
noBlur = 1
expAll = 1
NO.before.dataWrap = <li id="pageUid_{field:uid}"> |
NO.wrapItemAndSub = |</li>
NO.ATagTitle.field = title // nav_title
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
Dies funktioniert auch alles soweit tadellos. Jetzt wollte ich es so umschreiben, dass sobald die Seite Unterseiten hat, die Stammseite nicht verlinkt wird. Diese dient nur noch als Gruppierung um das Submenü zu öffnen.
Nun sieht der Code so aus:
NAVI= HMENU
NAVI {
special = directory
special.value = 1
1 = TMENU
1 {
IFSUB = 1
IFSUB.doNotLinkIt = 1
IFSUB.allWrap= <ul class="nav-ebene-eins>|</ul>
IFSUB.wrapItemAndSub = <li class="active">|</li>
wrap = <ul class="nav-ebene-eins">|</ul>
noBlur = 1
expAll = 1
NO.before.dataWrap = <li id="pageUid_{field:uid}"> |
NO.wrapItemAndSub = |</li>
NO.ATagTitle.field = title // nav_title
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
Wenn ich über die CSS die Maus noch als Hand darstellen lasse, scheint es soweit zu funktionieren. Der riesen Nachteil allerdings ist, dass die Formatierung des Menüs nicht mehr stimmt. Zum Beispiel funktioniert der Hovereffekt auch nicht mehr (Hintergrund ändert sich auf weiss, wenn mit der Maus darüber gefahren wird.
CSS:
ul.nav-ebene-eins {
padding:0;
margin:0;
list-style-type:none;
width:960px;
cursor:pointer;
}
ul.nav-ebene-eins li {
padding:0;
margin:0;
display:inline;
float:left;
position:relative;
}
ul.nav-ebene-eins li a {
display:block;
width:156px;
font-size:15px;
text-align:center;
line-height: 40px;
background:transparent url(img/navi-hg.jpg) center center repeat-x;
color:#fff;
border-right:1px solid #fff;
}
ul.nav-ebene-eins li a:hover,ul.nav-ebene-eins li a.active, ul.nav-ebene-eins li.pretty-hover a {
background:#fff;
color:#333;
}
Habt Ihr einen Tipp wie ich weiterkomme?
Danke für eure Hilfe
Hallo.
Ansatz wäre, das Du mal genau anschaust, was als HTML-Code rauskommt (Vorsicht, manche Browser "korregieren" Syntaxfehler, wie fehlende schließende Tags).
Wenn ich das (ohne Test) richtig sehe, dann wird das UL sowohl immer gesetzt (durch 1.wrap), als auch für den Fall von Unterpunkten (1.IFSUB.allWrap), d.h. zweimal. Das dürfte weder gewollt sein, noch syntaktisch korrekt.
Viele Grüße
Julian
Du hast auch hier
IFSUB.allWrap= <ul class="nav-ebene-eins>|</ul>
vergessen ein Hochkomma zu setzen. Solltest du den echten Inhalt per Copy&Paste hier gepostet haben kann auch das der Grund sein.
Hallo Zusammen
Danke für eure Hilfe. Das Menü funktioniert nun fast so wie es sein sollte.
Hier das aktuelle Script.
NAVI= HMENU
NAVI {
special = directory
special.value = 1
1 = TMENU
1 {
wrap = <ul class="nav-ebene-eins">|</ul>
noBlur = 1
expAll = 1
NO.before.dataWrap = <li id=”list{field:uid}”> |
NO.wrapItemAndSub = <li>|</li>
#NO.ATagTitle.field = title // nav_title
IFSUB=1
IFSUB{
doNotLinkIt = 1
allWrap = <a class="nav-ebene-ohne" href="#">|</a>
wrapItemAndSub = <li class="active">|</li>
}
ACT < .NO
ACT = 1
ACT.doNotLinkIt = 1
ACT.allWrap = <ul class="nav-ebene-verlinkt">|</ul>
ACT.wrapItemAndSub = <li class="active">|</li>
#ACT.ATagParams = class="active"
}
2 = TMENU
2 {
wrap = <ul class="nav-ebene-zwei">|</ul>
expAll = 1
NO.before.dataWrap = <li id=”list{field:uid}”> |
NO.wrapItemAndSub = |</li>
#NO.ATagTitle.field = title // nav_title
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
}
Nun ist noch ein Punk offen. Wenn ich auf ein Menü klicke öffnet sich das Submenü. Das Problem ist, dass sich dieses erst wieder schliesst, wenn ein anderes Submenü geöffnet wird oder ein Link gewählt wird.
Gibt es eine Möglichkeit dies zu schliessen, wenn ich mit der Maus das Submenü verlasse OnMouseOut oder wenn ich ins leere klicke?
Wie und wo müsste ich dies einprogrammieren?
> Gibt es eine Möglichkeit dies zu schliessen, wenn ich mit der Maus das Submenü verlasse
> OnMouseOut oder wenn ich ins leere klicke?
> Wie und wo müsste ich dies einprogrammieren?
Das ist glaub ich so pauschal nicht zu sagen, dass kommt darauf an wie du dein Menü umsetzt.
Generell lässt sich mit CSS und HOVER sehr viel machen was dropdowns oder ähnliches angeht.
Auf http://www.cssplay.co.uk/ gibt es sehr viele schöne Menübeispiele mit CSS.
Alternativ kann man natürlich mit Javascript nahezu alles machen. Mit onmouseout hast du selbst ein sehr schönes Stichwort gegeben, aber dessen meisten Funktionen lassen sich auch mit Hover umsetzen.
Ich neige dazu bei etwas spezielleren Menüs z.b. Pulldown mit Javascript die Links mit Funktionen zu versehen um einen globalen Wert zu setzen und verpasse dem Body eine onolick-Funktion die einen Interval triggert der prüft ob ein Link/Button geklickt wurde ( dann bleibt das Menü offen ) oder ob ins leere geklickt wurde ( dann schliesst sich das Pulldown wieder ).
Aber wie gesagt, wo und wie du das am besten "reinprogrammierst" ist davon abhängig wie du dein Menü umgesetzt hast.
Hallo Chrissli
Danke für deine Tipps. Gerne würde ich es über Java machen. Der Code sieht zur Zeit so aus:
$(document).ready(function() {
$(".nav-ebene-zwei").hide();
$(".nav-ebene-eins li:has(ul)").click(function(){
$(".nav-ebene-zwei").hide();
$(this).find("ul").show();
}, function(){
$(this).find("ul").hide();
$(this).removeClass('pretty-hover');
});
});
Leider kriege ich es nicht die Funktion onmouseout hier zu integrieren.
Hat jemand einen Tipp für mich?
Generell sollte auch in jQuery die Möglichkeit bestehen innerhalb von "each" o.ä. eine onmouseout-Funktion zur Verfügung zu stellen:
$('#menu').find('LI').each(function() {
this.onmouseout = function() {
$(this).hide();
};
});
Leider hat die nette Smiley-Erkennung deinen Javascriptcode verhackstückt. Evtl kannst du dein JS nochmal als File hochladen?
Hallo Chrissli
Danke für deine Hilfe.
Habe das File noch angehängt.
Ist natürlich etwas blöd so ohne HTML-Code zum Testen und ich war schlicht zu faul das selbst aufzubauen XD
Ich habe dir mal 2 Versionen so ins blaue erstellt evtl. sind noch Syntax- und/oder Logik-Fehler drin, aber nichts was ein Firebug nicht finden würde.
Version mit Timeout
var global_MenuTimeout = 3000; // nach so vielen Millisekunden wird das Menue nach verlassen geschlossen
var global_Timestep = 1000; // schrittweite fuer den Pruefintervall
var global_CurrentTimeout = 0; // Timer
var ival = null; // das wird nacher der Intervall
$(document).ready(function() {
submenucloser(); // alle untermenues zu machen
$('.nav-ebene-eins').each(function(){
this.onmouseout = function() {
triggerTimeout(); // bei verlassen der ersten menueebene wird der timeout gestartet
};
this.onmouseover = function() {
resetTimeout(); // sollte das menue waehrend des timeouts wieder
// ueberfahren werden wird der timeout zurueckgesetzt
};
});
$('.nav-ebene-eins li:has(ul)').each(function() {
this.onclick = function() {
resetTimeout(); // wie bei mouseover
$(this).find('ul').show(); // bei click untermenue anzeigen
};
});
});
function triggerTimeout() {
if(ival != null) { return false; } // falls der timeout bereits laeuft ist alles ok
ival = window.setInterval('menucountdown',global_Timestep); // timeout-intervall starten
}
function resetTimeout() {
if(ival != null) { // wenn der timeout laeuft
window.clearInterval(ival); // timeout anhalten
ival = null; // timeout variable zuruecksetzen
global_CurrentTimeout = global_MenuTimeout; // timer zuruecksetzen
}
}
function menucountdown() {
global_CurrentTimeout -= global_Timestep; // timer runterzahlen
if(global_CurrentTimeout == 0) { // wenn der timer abgelaufen ist
resetTimeout(); // setze den timeout zurueck
submenucloser(); // und mache alle untermenues zu
}
}
function submenucloser() {
$('.nav-ebene-zwei').hide(); // menue zumachen
}
Version ohne Timeout
$(document).ready(function() {
$('.nav-ebene-zwei').hide();
$('.nav-ebene-eins').each(function(){
this.onmouseout = function() {
$('.nav-ebene-zwei').hide();
};
});
$('.nav-ebene-eins li:has(ul)').each(function() {
this.onclick = function() {
$(this).find('ul').show();
};
});
});
Solltest du weiterhin Probleme haben oder ein etwaiger Fehler nicht auffindbar ist, kannst du ja noch den HTML-Teil deines Menüs posten
Hallo Chrissli
Bitte entschuldige meine späte Antwort. War leider längere Zeit Offline.
Ich habe dein Skript ohne Timeout ausprobiert. Dies funktioniert soweit auch.
Das Problem ist nun aber, dass ich nicht mehr von Submenüpunkt zu Submenüpunkt wechseln.
Sobald ich selben Menü den Untermenülink wechseln möchte (von oben nach unten), wird das Menü geschlossen.
Hättest du mir hier allenfalls auch noch eine kleine Hilfestellung?
Danke und Gruss
Hallo Zusammen
Möchte dieses Thema gerne nochmals aufnehmen. War leider längere Zeit im Krankenhaus und musste meine Arbeit unterbrechen. Nun bin ich seit Samstag wieder am Werken und bringe es nicht zum laufen.
Mit Timeout:
Bring ich nicht zum laufen. Leider hilft mir da auch Firebug nicht weiter.
Ohne Timeout:
Wenn ich mehrere Submenüpunkte habe, blendet es dieses aus, sobald ich von Punkt zu Punkt springe.
Wer kann mir helfen? Bin kurz vor dem verzweifeln!
Danke im voraus
Servus,
spontane Idee ohne Erfolgsgarantie. Was soll Dein CSS machen?
ul.nav-ebene-eins li a:hover,ul.nav-ebene-eins li a.active, ul.nav-ebene-eins li.pretty-hover a {
background:#fff;
color:#333;
}
Ich schreibe solchen Code der Übersichtlichkeit wegen immer so:
ul.nav-ebene-eins li a:hover,
ul.nav-ebene-eins li a.active,
ul.nav-ebene-eins li.pretty-hover a {
background:#fff;
color:#333;
}
Schnakelt's? Wenn die aktuelle Seite im Menu angezeigt wird (active), ist der Hintergrund #fff. Wenn die Maus drüber geht aber auch (hover). Warum also nicht:
ul.nav-ebene-eins li a:hover {
background:red;
color:#333;
}
ul.nav-ebene-eins li a.active {
background:blue;
color:#333;
}
ul.nav-ebene-eins li.pretty-hover a {
background:magenta;
color:#333;
}
Damit bekommen 3 unterschiedliche Zustände im Menü 3 unterschiedliche Hintergründe. Die Lösung sollte sich dann von selbst ergeben🙂
Viele Grüße
typix
emr schrieb... Wenn ich mehrere Submenüpunkte habe, blendet es dieses aus, sobald ich von Punkt zu Punkt springe...
D.h., Dein Menü würde fast schon so funktionieren, wie Du es möchtest. 🙂
Mit von Dir bis jetzt geposteten TypoScript und CSS ist das aber schlichtweg unmöglich. 😉
Wenn Du keinen Link und/oder Deine aktuelle Konfiguration (TS, CSS) nicht postest, ist es nicht möglich Dir zu helfen.
Zuerst muss Dein Menü ohne TYPO3 funktionieren – als statische Demo-Seite (HTML, CSS und ggf. JavaScript). Dann kannst Du es in TYPO3 integrieren:
- Sorge zuerst dafür, dass Deine TS-Konfiguration den gewünschten (validen) Quellcode ausgibt. Dass die fehlerhaft ist, wurde Dir schon gesagt (s. Julian.Hofmann).
- Dein Menü sollte auch ohne JavaScript bedienbar sein – CSS dementsprechend konfigurieren.
- Dann erst kommt JavaScript ins Spiel.
Deine TS- und CSS-Kenntnisse würde ich eher als unzureichend einschätzen (ist nicht böse gemeint). 🙂
Daher würde ich Dir empfehlen, nach einem fertigen Beispiel (Demo) zu suchen und in Deiner Installation zu integrieren.
Hallo Zusammen
Danke für eure Hilfe.
Deine TS- und CSS-Kenntnisse würde ich eher als unzureichend einschätzen (ist nicht böse gemeint).
Leider ja. Ich wollte mich hier einarbeiten und habe auch schon einiges geschafft. Allerdings stehe ich noch immer am Anfang.
Daher würde ich Dir empfehlen, nach einem fertigen Beispiel (Demo) zu suchen und in Deiner Installation zu integrieren.
Habe ich schon. Meine Typo3 Homepage ist ein Beispiel, welches mir gut gefällt und ich doch schon stark umgebaut habe. Allerdings möchte ich ein Menü welches auf Tablets und Smartphones (also ohne Maus) funktioniert. Hier habe ich leider noch kein Beispiel gefunden
Wenn Du keinen Link und/oder Deine aktuelle Konfiguration (TS, CSS) nicht postest, ist es nicht möglich Dir zu helfen.
Stelle ich euch gerne zur Verfügung. (Wenn ihr nicht lacht über meine erste Page)
http://www.myreptile.ch/cms/
Ich wäre wirklich froh, wenn ihr mir Helfen könnt. Es fehlen lediglich noch die letzten 5 Prozent. Wenn Ihr noch was anderes braucht, stelle ich dies gerne zur Verfügung.
Danke und Gruss
emr schrieb... Es fehlen lediglich noch die letzten 5 Prozent. ...
Dein Optimismus kann ich leider nicht teilen. 🙂
Sehe auch keine Möglichkeit, Dir auf die Schnelle zu helfen – aus meiner Sich sind es höchstens 5%, die nicht korrigiert werden müssen. 😉
Validen HTML- und CSS-Code sind Voraussetzung. Nutze zur Hilfe den w3-Validator und beseitige Deine Fehler.
Positionierung (absolute) ist wenig geeignet, um die Elementen einer Webseite zu einander zu zuordnen. Außerdem ist sie viel komplexer, als auf dem ersten Blick ersichtlich. Allein der Stapelkontext gebildet durch „position“ (ungleich static) und „opacity“ (kleiner 1.0) bedarf ein genaues Verständnis.
Überlege Dir also nochmal, ob Du die Demo-Code so stark verändern willst. Ich gehe davon aus, dass in der Demo-Seite überwiegend mit Float gearbeitet wird.
Auf jedem Fall brauchst Du gute Grundkenntnisse. Ein guter Einstieg:
http://little-boxes.de/little-boxes-teil1-online.html
Viel Erfolg! 🙂
Hallo etux
Sehe auch keine Möglichkeit, Dir auf die Schnelle zu helfen – aus meiner Sich sind es höchstens 5%, die nicht korrigiert werden müssen.
Danke für deine aufmunternden Worte! 😢 Ich würde sagen ich ziehe mich für einige Tage bzw. Wochen zurück und werde ersmal meine Fehler ausmerzen (bevor ich neue produziere).
Vermutlich habe ich die ganze Sache auch falsch angepackt.
Gruss