Testing jQuery Menu Aim
HTML
<script src="//cdn.jsdelivr.net/jquery.menu-aim/0.1/jquery.menu-aim.js"></script>
<ul>
<li>Lorem ipsum dolor.
<div><h2>Lorem</h2>Ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, asperiores. <p>
test
</p></div>
</li>
<li>Excepturi, distinctio, ex!
<div><h2>Quasi</h2>Eum beatae voluptate quo dicta pariatur, maxime rem in.</div>
</li>
<li>At, dolor, nemo.
<div><h2>Aut</h2>Iusto explicabo unde hic atque! Numquam nobis, modi beatae.</div>
</li>
<li>Commodi, omnis quas?
<div><h2>Officiis</h2>Possimus, fugiat nemo hic accusantium neque commodi quaerat. Laudantium?</div>
</li>
<li>Nulla earum, libero.
<div><h2>Consequatur</h2> Eum voluptatum debitis quas consectetur at a ad repellat.</div>
</li>
<li>Facere, molestiae, magnam!
<div><h2>Dignissimos</h2> Consequatur, corporis! Dolore, ipsum quam suscipit corporis odit, dignissimos.</div>
</li>
<li>Quidem, illum ad!
<div><h2>Rerum</h2>Provident mollitia adipisci odit, aliquid dolores eum. Deleniti, quod.</div>
</li>
<li>Hic, sequi, dignissimos?
<div><h2>Eligendi</h2>Fugit ullam enim totam vero harum consequatur natus assumenda.</div>
</li>
<li>Cumque rem, facere.
<div><h2>Sit</h2>Natus delectus soluta consequuntur quidem. Eveniet autem ut perferendis!</div>
</li>
<li>Accusantium, voluptas, debitis!
<div><h2>Quo</h2>At ducimus doloremque quas maiores magnam, sapiente corporis sunt!</div>
</li>
</ul>
SCSS
* {
font-family: Arial;
}
ul {
padding: 0;
position: relative;
background-color: #aaa;
display: inline-block;
li {
cursor: pointer;
list-style: none;
padding: 10px;
> div {
padding: 10px;
position: absolute;
background-color: #777;
top: 0;
left: 240px;
width: 200px;
height: 200px;
display: none;
}
}
}
JavaScript
$('ul').menuAim({
activate: function(e) {
$(e).find('> div').show();
},
deactivate: function(e) {
$(e).find('> div').hide();
},
exitMenu: function(e) {
$(e).find('> div').hide();
return true;
}
});