hover/click menu mininalisticky

by Petr Haluza

HTML

<nav class="hdr-menu">
	<a class="hdr-menu-item" href="#">subitem</a>
	<div class="hdr-menu-item">Item1
	<ul>
		<li><a href="#">subitem</a></li>
	</ul>
	</div>
		<div class="hdr-menu-item">Item2
		  <ul>
			  <li><a href="#">subitem</a></li>
			  <li><a href="#">subitem</a></li>
		 </ul>
	</div>
</nav>

CSS

* {font-family:sans-serif }
.hdr-menu-item {padding: 1em}
.hdr-menu-item > ul {display:none; position: absolute}
.hdr-menu-item.hover > ul {display:block !important}
nav.hdr-menu {display:flex; padding: 1em}

JavaScript

$(document).ready(function() {
    // Zobrazení submenu při najetí myší
    $('.hdr-menu-item').hover(
        function() {
            $(this).find('ul').show();
        },
        function() {
            $(this).find('ul').hide();
        }
    );

    // Přidání třídy .hover při kliku na .item
    $('.hdr-menu-item').click(function() {
        $('.hdr-menu-item').removeClass('hover');
				$(this).toggleClass('hover');
        event.stopPropagation();
    });

    // Odebrání třídy .hover při kliku mimo .item
    $(document).click(function() {
        $('.hdr-menu-item').removeClass('hover');
    });
});