jQuery Menu Aim
HTML
<script src="//cdn.jsdelivr.net/jquery.menu-aim/0.1/jquery.menu-aim.js"></script>
<body>
<div id="header">
<ul id="nav">
<li data-submenu-id="submenu-void-1">
<a href="#">void</a>
</li>
<li>
<span data-submenu-id="submenu-main-3">
<a href="#">void</a>
</span>
</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>
<ul id="submenu-main-3" style="display:none;">
<li><a href="#">U4</a></li>
<li><a href="#">U5</a></li>
<li><a href="#">U6</a></li>
</ul><!-- header -->
</body>
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
#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;
}
JavaScript
(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));