Moving Boxes

Boxes that move

by Glynne Turner

HTML

<div class="menu_holder clearfix">
  <div class="toggle">menu</div>
  <div class="nav">
    <a href="#" class="menu"> Home</a>
    <a href="#" class="menu"> Studio </a>
    <a href="#" class="menu"> Treatments </a>
    <a href="#" class="menu"> Booking </a>
    <a href="#" class="menu"> Price List </a>
    <a href="#" class="menu"> Shop </a>
    <a href="#" class="menu"> Contact </a>
  </div>
</div>

CSS

.menu_holder {
  background: rgba(96, 76, 69, 1);
  background: -moz-linear-gradient(top, rgba(96, 76, 69, 1) 0%, rgba(58, 22, 16, 1) 85%, rgba(58, 22, 16, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(96, 76, 69, 1)), color-stop(85%, rgba(58, 22, 16, 1)), color-stop(100%, rgba(58, 22, 16, 1)));
  background: -webkit-linear-gradient(top, rgba(96, 76, 69, 1) 0%, rgba(58, 22, 16, 1) 85%, rgba(58, 22, 16, 1) 100%);
  background: -o-linear-gradient(top, rgba(96, 76, 69, 1) 0%, rgba(58, 22, 16, 1) 85%, rgba(58, 22, 16, 1) 100%);
  background: -ms-linear-gradient(top, rgba(96, 76, 69, 1) 0%, rgba(58, 22, 16, 1) 85%, rgba(58, 22, 16, 1) 100%);
  background: linear-gradient(to bottom, rgba(96, 76, 69, 1) 0%, rgba(58, 22, 16, 1) 85%, rgba(58, 22, 16, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#604c45', endColorstr='#3a1610', GradientType=0);
  width: 100%;
  height: 30px;
  position: fixed;
  z-index: 1000;
  text-align: right;
}

 

.menu:hover,
.toggle:hover {
  color: #3a1610;
  background: rgba(255, 240, 189, 1);
  background: -moz-linear-gradient(top, rgba(255, 240, 189, 1) 0%, rgba(254, 225, 141, 1) 85%, rgba(254, 225, 141, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 240, 189, 1)), color-stop(85%, rgba(254, 225, 141, 1)), color-stop(100%, rgba(254, 225, 141, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 240, 189, 1) 0%, rgba(254, 225, 141, 1) 85%, rgba(254, 225, 141, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 240, 189, 1) 0%, rgba(254, 225, 141, 1) 85%, rgba(254, 225, 141, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 240, 189, 1) 0%, rgba(254, 225, 141, 1) 85%, rgba(254, 225, 141, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 240, 189, 1) 0%, rgba(254, 225, 141, 1) 85%, rgba(254, 225, 141, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#604c45',...

JavaScript

$(window).resize(function() {
  var windowsize = $(window).width();
  if (windowsize > 767) {
    $('.nav').show();
  } else {
    $('.nav').hide();
    $('.toggle').removeClass('open');
  }
})
$('.toggle').click(function(event) {
  $(this).toggleClass('open');
  if ($(this).hasClass('open')) {
    $('.nav').show();
  } else {
    $('.nav').hide();
  }
})