|
|||
Slide Menü
Hallo miteinander,
ich habe kürzlich ein CSS-Slide Menü realisiert. Dabei habe ich aber noch ein Anliegen, das ich selbst nicht zustande bringe: TEST Sobald man die Maus über den mit der gestrichelten Linie umrandeten div-Container bewegt, wird das Menü wie gewünscht ausgeklappt. Verwendet man allerdings den Link "Reload" und lässt die Maus darauf hin innerhalb des Containers stehen, wird die CSS-transition erneut durchgeführt. In Safari muss die Maus sogar nach dem Reload noch einmal kurz bewegt werden, damit das Menu erneut ausgeklappt wird. Ich hätte aber gerne, dass das Menü nach dem Reload aufgeklappt bleibt, sofern sich die Maus noch innerhalb des Containers befindet - so lange, bis die Maus den Container wieder verlässt. Mein zweites Anliegen war: Wenn die Seite neu geladen wird und die Maus sich NICHT innerhalb des Containers befindet, wäre es toll, wenn die transition im ausgeklappten Stadium beginnen würde und sich einmalig einklappt, damit der Besucher auf das Menü aufmerksam gemacht wird. Die beiden Punkte könnten miteinander zusammenhängen - ich sage es in anderen Worten noch einmal so: Unmittelbar nach dem Reload befindet sich das Menü im ausgeklappten Zustand. Wenn die Maus sich dabei innerhalb des div-Containers befindet, bleibt das Menü ausgeklappt, bis die Maus den div-Container wieder verlässt. Wenn sich die Maus jedoch beim Reload außerhalb des div-Containers befindet, wird das Menü eingeklappt und erst wieder bei hover ausgeklappt. Ist das mit JS zu realisieren? Ich bin leider kompletter Neuling auf dem Gebiet. Vielen Dank! |
Sponsored Links |
|
|||
Ich bin gerade am experimentieren. Gegenwärtig sieht das Ganze so aus:
Code:
<script> function expand(x) { x.style.marginLeft="0"; } function contract(x) { x.style.marginLeft="-140px"; } </script> Code:
<div id="menu" onmouseover="expand(slide)" onmouseout="contract(slide)"> Code:
<script> setTimeout(contract(slide),3000); </script> |
|
||||
Hallöchen,
Zitat:
Code:
window.setTimeout(function(){ alert('mit Parameter'); }, 3000); lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
|||
Danke! Ich habe das jetzt so gelöst:
Code:
<script> setTimeout(function(){slide.style.marginLeft="-140px"},1000); </script> TEST Zu meinem Glück fehlt mir jetzt nur noch der letzt Schritt: Das oben genannte setTimeout Script sollte nicht ausgeführt werden, wenn sich die Maus nach dem Laden noch innerhalb des Divs befindet. Auf diese Weise würde das Menü auch nach 1000ms noch ausgeklappt bleiben und erst wieder eingeklappt werden, sobald die Maus das Div (onmouseout) verlässt. Jetzt stehe ich leider an mit meinen bescheidenen Kenntnissen.. So etwas wie... Code:
<script> if (!mouseover(menu)) { setTimeout(function(){slide.style.marginLeft="-140px"},1000); } </script> Geändert von Philidor (02.09.2013 um 19:24 Uhr) |
|
|||
Das mit set timeout hab ich dir schon im andern thraed gesagt...
Versuch mal folgendes: Code:
elem = document.getElementById("menu"); elem.onclick = proove; function proove(e){ mousex = document.all ? window.event.clientX : event.pageX; mousey = document.all ? window.event.clientY : event.pageY; if(mousex > menu.offsetLeft && mousex < menu.offsetLeft + menu.clientWidth && mousey > menu.offsetTop && mousey < menu.offsetTop + menu.clientHeight){ setTimeout(function(){slide.style.marginLeft="-140px"},1000); } } menu.click(); |
|
|||
Genau, danke dafür. Ich hab das leider nicht zum Laufen gebracht mit dem Code und wusste zu wenig über JS.
Zitat:
Code:
Fehler: ReferenceError: event is not defined Zeile: 45 |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Slide Menü | SpecialFighter | Javascript & Ajax | 0 | 19.07.2011 10:58 |
Slide Menü mit Artikelzähler | gandalf_hh | Javascript & Ajax | 6 | 09.07.2011 21:25 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
Slide Menü wird nicht richtig dargestellt! (JS/CSS) | xxsebixx | Javascript & Ajax | 7 | 01.09.2008 17:49 |
CSS menue slide | kolja | Javascript & Ajax | 2 | 23.03.2007 12:58 |