Lösung für sehr lange Dropdown Menüs

Ich bin gerne zuversichtlich bei Post-Titeln, aber die Realität in diesem Fall ist eine ***mögliche*** Lösung für sehr lange Dropdowns. Das Problem bei langen Dropdowns ist, dass das Dropdown selbst unter den "Fold" der Website gelangen kann. Das heißt, unter den sichtbaren Bereich des Browserfensters. Um also diese Menüpunkte weiter unten zugänglich zu machen, müssen Sie Ihr Browserfenster scrollen. Für diejenigen von uns, die eine Scroll-Maus haben, ist das keine große Sache. Für diejenigen, die keine haben, sind die unteren Menüpunkte völlig unzugänglich, da das Scrollen des Browser-Scrollbalkens bedeutet, dass Sie mit der Maus aus dem Menü herausfahren müssen (und es wahrscheinlich schließen).

 

Demo anzeigen   Dateien herunterladen

 

Diese Idee habe ich zuerst auf der Account-Center-Seite von Media Temple gesehen. Dort gibt es ein Dropdown für "Domains", in dem jede Ihrer dort gehosteten Domains aufgelistet ist. Dies kann eine sehr lange Liste sein. Media Temple hatte eine Technik implementiert, bei der sich das Menü beim Herunterscrollen beschleunigt bewegte.

Als ich diesen Screenshot mache, stelle ich natürlich fest, dass die coole Lösung, die sie ergänzt haben, nicht mehr da ist. Das lässt mich fragen, welche Probleme sie damit hatten, aber na ja, wir machen trotzdem weiter. Hier ein Versuch, die Idee zu visualisieren

jQuery bringt es zum Laufen

Ich werde den Code hier einfach zum schnellen Nachschlagen einfügen. Ich habe ihn kommentiert, daher sollte er ziemlich einfach zu verstehen sein. Er ist über 60 Zeilen lang, aber machen Sie sich keine zu großen Sorgen, er ist ziemlich einfach.

1. Setzen Sie eine maximale Höhe für die Dropdowns
2. Beim Hovern das Untermenü anzeigen
3. Berechnen Sie einen Geschwindigkeitsmultiplikator basierend auf der Höhe des Untermenüs
4. Beobachten Sie die Mausbewegungen im Menü
5. Scrollen Sie das Menü mit der Mausbewegung, basierend auf dem Multiplikator
6. Beim Ausfahren der Maus das Menü schließen

var maxHeight = 400;

$(function(){

    $(".dropdown > li").hover(function() {
    
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller
        
        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());
        
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        
        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }
        
    }, function() {
    
        var $el = $(this);
        
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    
    });
    
    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });
    
});

HTML & CSS

Ich zögere, hier eine Menge HTML- und CSS-Code einzufügen, weil er einfach nicht sehr interessant ist. Sie können den Code sowieso herunterladen, also werfen Sie einen Blick darauf. Es ist nur eine normale semantische, verschachtelte ungeordnete Liste und einige einfache, sehr grundlegende Stile.

Testen

Ich habe es bis hinunter zu IE 6 getestet und es schien gut zu funktionieren.

 

Demo anzeigen   Dateien herunterladen