Demo - Menu

by Ali Khaled

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

 <ul>
 {{#products}}
	<li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">
      <div class="grid-view-item product-card">
        <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{du}}">
          <span class="visually-hidden">{{dt}}</span>
        </a>
        <div class="grid-view-item__image-wrapper product-card__image-wrapper js">
          <div style="padding-top: 66.66666666666666%;">
            <img  class="grid-view-item__image lazyautosizes" src="{{iu}}" />
          </div>
        </div>
		<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{dt}} - {{variantinfo}}</div>
        <dl class="price" data-price="">
          <span class="price-item price-item--sale" data-sale-price="">
            {{cu}}{{pr}}
          </span>
        </dl>
        <a href="" data-product-id="{{empi}}" data-url="{{du}}" data-variant-id="{{epi}}" class="add-to-cart">
			{{#isInCart}}Moved to cart{{/isInCart}}
			{{^isInCart}}Move to cart{{/isInCart}}
		</a>
      </div>
    </li>
  {{/products}}
 </ul>
</div>

CSS

.container>label {
  margin-bottom: 15px;
  margin-right: 25px;
}

/* element affected by the menu commands */

#menu-target {
  font-size: 18pt;
  text-align: center;
  padding: 16px;
  margin: 6px 0;
  background: #00c1d5;
  color: black;
  border: 1px solid rgba(0, 0, 0, .25);
}

/* bar containing the menus */

.menubar {
  position: sticky;
  display: flex;
  background: #fddfa7;
  padding: 12px;
  top: 0;
}

/* customize wijmo default styles */

.wj-state-selected {
  color: black;
  background: orange;
}

.wj-menu {
  padding: 6px 14px;
  border: none;
  background: transparent;
}

.wj-menu:hover,
.wj-menu.wj-state-focused {
  background: rgba(0, 0, 0, .05);
}

.wj-menu .wj-input-group .wj-input-group-btn {
  display: none;
  /* hide the menu's drop-down buttons */
}

.wj-listbox.wj-menu-items {
  min-width: 8em;
  border: none;
  background: #fddfa7;
}

.wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) {
  padding: 6px 12px;
}