Slide Menü

Philidor · #1 (**permalink**) 01.09.2013, 03:21

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!

protonenbeschleuniger · #2 (**permalink**) 02.09.2013, 07:23

Zitat:

Zitat von Philidor

Ist das mit JS zu realisieren?

Ja, ist es.

Philidor · #3 (**permalink**) 02.09.2013, 18:54

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)">

Irgendetwas habe ich bei setTimeout scheinbar nicht richtig verstanden:

Code:

<script>
setTimeout(contract(slide),3000);
</script>

Wie müsste das richtig heißen?

lottikarotti · #4 (**permalink**) 02.09.2013, 19:06

Hallöchen,

Zitat:

Zitat von Philidor

Irgendetwas habe ich bei setTimeout scheinbar nicht richtig verstanden:

Code:

<script>
setTimeout(contract(slide),3000);
</script>

Wie müsste das richtig heißen?

Wenn du Parameter an eine Callback-Methode weitergeben möchtest, solltest du dies in einer anonymen Funktion tun:

Code:

window.setTimeout(function(){
    alert('mit Parameter');
}, 3000);

Viele Grüße,
lotti

Philidor · #5 (**permalink**) 02.09.2013, 19:21

Danke! Ich habe das jetzt so gelöst:

Code:

<script>
setTimeout(function(){slide.style.marginLeft="-140px"},1000);
</script>

Das Ganze sieht momentan so aus:
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>

...wenn das hier ein mix aus php und js wäre

mymaksimus · #6 (**permalink**) 02.09.2013, 21:06

moment fehlpost...

mymaksimus · #7 (**permalink**) 02.09.2013, 21:17

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();

das muss einfach ganz ans ende des bodys. Poste mir bitte fehler, ich weiss grad nicht ob ich ein paar eingebaut habe. Das ganze simuliert einfach einen click event, und fragt dann die koordinaten ab. Wenn die auf dem menu liegen... Ist ja klar.

Philidor · #8 (**permalink**) 03.09.2013, 01:37

Zitat:

Zitat von mymaksimus

Das mit set timeout hab ich dir schon im andern thraed gesagt...

Genau, danke dafür. Ich hab das leider nicht zum Laufen gebracht mit dem Code und wusste zu wenig über JS.

Zitat:

Zitat von mymaksimus

das muss einfach ganz ans ende des bodys. Poste mir bitte fehler, ich weiss grad nicht ob ich ein paar eingebaut habe. Das ganze simuliert einfach einen click event, und fragt dann die koordinaten ab. Wenn die auf dem menu liegen... Ist ja klar.

Leider triggert das event noch nicht beim Reload:

Code:

Fehler: ReferenceError: event is not defined
Zeile: 45

protonenbeschleuniger · #9 (**permalink**) 03.09.2013, 15:12

Einfach folgenden code einbauen:

Code:

<script>
setTimeout(contract,1000);
</script>

mymaksimus · #10 (**permalink**) 03.09.2013, 15:12

Hm hast du das schon hochgeladen?
Ich schaus mir mal an

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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