Grille
Erfahrenes Mitglied
Guten Tag,
ich versuche ein horizontales Menü zu programmieren, so wie dieses unterhalb des Banners auf dieser Seite steht:
Graphic Design Services | 99designs
ich habe jetzt die Abfrage des Containers und das ganze bewegt sich auch schon, leider habe ich probleme mit der Maus.
Bei "onmousemove" muss ich immerzu die Maus bewegen damit sich das Menü bewegt.
Ich möchte aber dauerhaft: "wenn die Maus über dem Menü-Container steht oder bewegt, soll sich das Menü bewegen".
Ich neige dazu, Dinge kompliziert zu konstruieren.
Vielleicht habt Ihr auch eine einfachere Lösung?
Vielen Dank und einen schönen Tag euch.
Grille
ich versuche ein horizontales Menü zu programmieren, so wie dieses unterhalb des Banners auf dieser Seite steht:
Graphic Design Services | 99designs
ich habe jetzt die Abfrage des Containers und das ganze bewegt sich auch schon, leider habe ich probleme mit der Maus.
Bei "onmousemove" muss ich immerzu die Maus bewegen damit sich das Menü bewegt.
Ich möchte aber dauerhaft: "wenn die Maus über dem Menü-Container steht oder bewegt, soll sich das Menü bewegen".
HTML:
<div id="lmenue" class="position-1">
<ul class="nav menumenueleistungen mod-list" style="left: 0px; position: relative;">
<li class="item-132"><a href="1"> Punkt 1 </a></li>
<li class="item-133"><a href="2"> Punkt 2 </a></li>
<li class="item-134"><a href="3"> Punkt 3 </a></li>
<li class="item-135"><a href="4"> Punkt 4 </a></li>
<li class="item-136"><a href="5"> Punkt 5 </a></li>
<li class="item-137"><a href="6"> Punkt 6 </a></li>
<li class="item-138"><a href="7"> Punkt 7 </a></li>
<li class="item-139"><a href="8"> Punkt 8 </a></li>
</ul>
</div>
Javascript:
jQuery(function($){
var view = $(window).width(); // Breite des sichtbaren Fensters
var drossel = 10; // drosselt die Animation
var bewegung = 0; // Variable zum berechnen der Position, damit sich das Menü nur so weit bewegt, wie es übersteht.
$("ul.menumenueleistungen").css({left: bewegung, position:'relative'}); // erste Positionierung
// berechnen der Menülänge
var menueweite = 0; // Berechnung der Breite des gesamten Menüs durch aneinanderrechnen der einzelnen Listen-Breiten
$("ul.menumenueleistungen li").each(function() {
menueweite += $(this).width();
menueweite += 20;
});
var ueberstand = menueweite - $(window).width(); // feststellen, wie weit das Menü sich außerhalb der Webseite befindet
var bereich = view/4; // festlegen, wie breit der Bereich ist, wo die Maus die Menüanimation rechts oder links auslösen soll
document.getElementById('lmenue').onmousemove = function(evt) { // wenn die Maus sich auf dem Container bewegt, dann ...
let elem = evt.target; // ... stelle die Position fest
var ueberstand = menueweite - $(window).width(); // ... feststellen, wie weit das Menü sich außerhalb der Webseite befindet
var links = Math.floor((bereich-evt.pageX)/drossel); // ... Wert, wie schnell sich das Menü bewegen soll, wenn die Maus im linken Bereich ist
if (links < 10){ links = 0;} // unterschreitet "links" einen Wert, dann soll die Variable "0" sein
var rechts = Math.floor((evt.pageX-(view-bereich))/drossel); // ... Wert, wie schnell sich das Menü bewegen soll, wenn die Maus im rechten Bereich ist
if (rechts < 10){ rechts = 0;} // unterschreitet "rechts" einen Wert, dann soll die Variable "0" sein
// Bewegungsberechnung "links"
if (bewegung < 0 && links != 0){
if (0 > bewegung + links){
bewegung = bewegung + links;
} else {
bewegung = 0;
}
}
// Bewegungsberechnung "rechts"
if ((ueberstand * (-1)) < bewegung && rechts != 0){
if ((ueberstand * (-1)) < bewegung - rechts){
bewegung = bewegung - rechts;
} else {
bewegung = ueberstand * (-1);
}
}
// Ausgabe über Console
console.log('links ' + links + "; rechts: " + rechts + "; bewegung: " + bewegung + "; ueberstand: " + ueberstand);
// Modifikation - Bewegung des Menüs
$("ul.menumenueleistungen").css({left: bewegung, position:'relative'});
}
});
Ich neige dazu, Dinge kompliziert zu konstruieren.
Vielleicht habt Ihr auch eine einfachere Lösung?
Vielen Dank und einen schönen Tag euch.
Grille