Chronos
Aktives Mitglied
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:
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:
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:
JS:
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.
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:
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>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.
):
