Simple menu 3

index.html

<ul class="menubar">
  <li class="menubar-item">
    <a class="menubar-item-target" href="#">File</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="#">Open</a></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Save</a></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Save as&#8230;</a></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Close</a></li>
      <li class="menu-separator"></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Exit</a></li>
    </ul>
  </li>
  <li class="menubar-item">
    <a class="menubar-item-target" href="#">Edit</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="#">Cut</a></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Copy</a></li>
      <li class="menu-item"><a class="menu-item-target" href="#">Paste</a></li>
    </ul>
  </li>
  <li class="menubar-item">
    <a class="menubar-item-target" href="#">Help</a>
    <ul class="menu">
      <li class="menu-item"><a class="menu-item-target" href="#">About</a></li>
    </ul>
  </li>
</ul>

script.js

var Menubar = {};

Menubar.active = false;

Menubar.open = function(el) {
  var menubar = $(el).closest('.menubar')
  ,   item = $(el).closest('.menubar-item')
  ,   menu = item.find('.menu').first()
  ;
  Menubar.active = true;
  item.addClass('is-selected')
  item.siblings().removeClass('is-selected');
};

Menubar.close = function() {
  $('.menubar-item.is-selected').removeClass('is-selected');
  Menubar.active = false;
};

$('.menubar-item').on('click', function(e) {
  if (!Menubar.active) {
    Menubar.open(this);
    e.stopPropagation(); // Keep document.click from firing
  }
});

$('.menubar-item').on('mouseenter', function() {
  if (Menubar.active) { Menubar.open(this); }
});

$(document).on('click', function() {
  Menubar.close();
});

Simple-menu-3.markdown

Simple menu 3

This is a simple menu marked up in an ultra-modular fashion (without CSS tag selectors).

Forked from John W. Long's Pen Simple menu 2.

A Pen by John (Jonatas Eduardo) on CodePen.

License.

style.scss

@import "compass/css3";
@import "compass";

@include global-reset;

body {
  font-family: sans-serif;
  font-weight: 100;
  background: #eee;
}

.menubar {
  background: white;
  @include box-shadow(rgba(black, 0.2) 0 1px 1px);
  list-style: none;
  font-size: 14px;
  padding: 0 10px;
}
.menubar-item {
  display: inline-block;
  position: relative;
}
.menubar-item-target {
  color: black;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
    
  &:hover, .is-selected & {
    background: #29a7f5;
    color: white;
  }
}

.menu {
  @include box-shadow(rgba(black, 0.5) 0 5px 15px);
  @include border-radius(3px);
  @include border-top-left-radius(0);
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  list-style: none;
  width: 15em;
  padding: 10px 0;
  
  .is-selected & { display: block; }
}
.menu-item-target {
  color: black;
  display: block;
  padding: 8px 20px;
  text-decoration: none;
        
  &:hover {
    background: #29a7f5;
    color: white;
  }
}   
.menu-separator {
  border-top: 1px solid #ddd;
  margin: 8px;
}