Bessere Menüs erstellen (Menu Aim)

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Chronos

Aktives Mitglied
12 Juli 2012
241
26
28
Hallo Forum, heute mal keine Frage sondern eine kleine Anleitung um bessere Menüs zu erstellen.
Was? Bessere Menüs? Mit JavaScript? Was wo wie warum?

Es geht um Menüs mit Untermenüs - vielleicht kennt das ja der ein oder andere:
Man befindet sich auf einen Hauptmenüpunkt und möchte auf direktem Weg einen Untermenüpunkt auswählen.
Dabei passiert es oft, dass man auf diesem direkten Weg auf den nächsten Hauptmenüpunkt kommt, was hier in dem Bild sehen könnt:
z22mN1H.png

Hover man also von Main 2 auf U4, öffnet sich auch direkt das Untermenü zu Main 1 (weil die gesamte Fläche ja ein Link ist) und das wollen wir nicht.

Amazon hat das wohl als erstes in der Form in seinem Menü eingesetzt zu dem es auch einen guten Artikel gibt:
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Da steht auch alles etwas genauer beschrieben. Das Plugin funktioniert auch für Menüs die sich Links oder z. B. unterhalb befinden - und da ich kein gutes Tutorial oder Beispiel für ein horizontales gefunden habe, dachte ich, teile ich das mal mit euch.

Hier noch auf Github:
https://github.com/kamens/jQuery-menu-aim

Nachfolgend also mein funktionierendes Beispiel:

HTML:
HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Menu Tri</title>
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
        <link rel="stylesheet" type="text/css" href="./css/menu.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery.menu-aim.js"></script>
        <script type="text/javascript" src="./js/aimbot.js"></script>
    <body>
        <div id="header">
            <ul id="nav">
                <li data-submenu-id="submenu-void-1">
                    <a href="#">void</a>
                </li>
               
                <li data-submenu-id="submenu-void-2">
                    <a href="#">void</a>
                </li>
               
                <li data-submenu-id="submenu-main-1"><a href="#">Main 1</a>
                    <ul id="submenu-main-1">
                        <li><a href="#">U1</a></li>
                        <li><a href="#">U2</a></li>
                        <li><a href="#">U3</a></li>
                    </ul>
                </li>

                <li data-submenu-id="submenu-main-2"><a href="#">Main 2</a>
                    <ul id="submenu-main-2">
                        <li><a href="#">U4</a></li>
                        <li><a href="#">U5</a></li>
                        <li><a href="#">U6</a></li>
                    </ul>
                </li>
            </ul><!-- nav -->
        </div><!-- header -->    
    </body>
</html>
Wichtig beim erstellen des Menü ist es nur, dass man einen Verweis zum Untermenü herstellt, also wie ich es mit "<li data-submenu-id="submenu-main-1">" zu "<ul id="submenu-main-1">" getan habe.

CSS:
Code:
#header { 
    min-width: 800px; 
    height: 150px; 
} 
#nav {  
    width: 100%; 
    background-color: #333; 
    font: 14px Arial, sans-serif;
    float: left; 
}

#nav > li {
    border-left: 1px solid #0f0;
}

#nav > li:last-child {
    border-right: 1px solid #0f0;
}

#nav li { 
    list-style: none; 
    float: left; 
    width: 120px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center;
}

#nav li a { 
    color: white; 
    text-decoration: none; 
    display: block; 
} 
#nav li a:hover { 
    background-color: rgb(220, 220, 220); 
    color: #000;
}
       
#nav li ul { 
    position: relative;  
    display: none;
    left: -60px;
} 
#nav li:hover ul { 
    display: block; 
} 
#nav li ul li { 
    float: none; 
    display: inline; 
}
#nav li ul li a { 
    width: 250px; 
    position: relative; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    text-align: left;
    background: #333; 
    color: #fff; 
}
#nav li ul li a:hover { 
    background: rgb(220, 220, 220); 
    color: #000; 
}

JS:
Code:
(function($, window, document) {
    $(function() {

        // Das Menü
        var $menu = $("#nav");
    
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu,
            submenuDirection: "below"
        });
       
        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);

            // Submenü anzeigen
            $submenu.css({
                display: "block"
            });

            console.log(submenuId);
        }

        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);

            // Submenü ausblenden
            $submenu.css("display", "none");
        }
    });
 
}(window.jQuery, window, document));

Viel gibt es zum JavaScript nicht zu sagen, es wird wie schon erwähnt nur ein Bezug vom Haupt- zum Untermenü hergestellt und entsprechendes CSS gesetzt - die Verzögerung selbst lässt sich im Plugin einstellen.

Hier noch ein fiddle dazu:
http://jsfiddle.net/Chronos90/WYWKR/

Viel Spaß damit, vielleicht bringt es ja jemanden etwas.
 

Alex55

Mitglied
3 Juli 2012
214
9
18
Find ich gut dass du das machst. Aber gehört das nicht besser in Tutorials?
 

thecain

Aktives Mitglied
25 September 2013
537
83
28
Schweiz
Das geht mit rein CSS nicht.... Also ich kann mir unmöglich vorstellen wie... es ist ja kein normales menu
 

Chronos

Aktives Mitglied
12 Juli 2012
241
26
28
Kleiner Nachtrag:
Neben "submenuDirection" ist auch "tolerance" eine wichtige Option,
Je nachdem wie weit eure Untermenüpunkte auseinander sind
und somit das Dreieck auch flacher wird kann es sein, dass man da die Toleranz herunter setzen muss.
Für den Algorithmus sieht es nämlich dann wieder so aus, als ob ihr im Menü horizontal navigieren würdet und nicht, dass ihr in ein Untermenü wollt ;).
(Standard ist btw. 75 in meinem eigenen Bespiel, nicht das aus dem Thread, brauchte ich 5.)

Edit vom Nachtrag:
Das was im CSS sonst im hover passieren würde, schreibt man hier im JavaScript in die oben genannten Funktionen (sonst wäre es ja doppelt drinn)
 
Zuletzt bearbeitet:

Chronos

Aktives Mitglied
12 Juli 2012
241
26
28
Noch mal ein Nachtrag (:D):

Im Plugin gibt es wohl einen Bug bzw. ein verhalten was in der Art etwas unpraktisch ist;
Verlässt man einen Hauptmenüpunkt und möchte danach erneut in den selben, öffnet sich des Untermenü nicht.
Das geht erst dann wieder, wenn man bereits auf einem anderen Hauptmenüpunkt gewesen ist.

Zu dem Problem gibt es auch schon Beiträge: https://github.com/kamens/jQuery-menu-aim/issues/14
Bei mir klappte die Lösung von "motakuji commented on Apr 30, 2013"

Was dann in etwa so aussieht:
Code:
var $mainMenu = $(".navbar-nav");
$mainMenu.menuAim({
    activate: activateSubmenu,
    deactivate: deactivateSubmenu,
    submenuDirection: "below",
    exitMenu: function() {
        return true
    },
    tolerance: 5
});

Sprich exitMenu als Funktion mit return true. Mehr nicht.
(Wehe das liest hier niemand :p)
 
Werbung:

Neueste Beiträge