<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,900' rel='stylesheet' type='text/css'>
<h1>Business Directory</h1>
<div class='sidebar-1'> 
  <div class='sidebar-menu'>Churches & Religious Services<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>The Vineyard at Johnstown</li>
	<li>Hillcrest Church of Christ</li>
	<li>Church of the Nativity</li>
	<li>Lighthouse of Utica</li>
	<li>Utica Baptist Temple</li>
	<li>Utica Presbyterian Church</li>
	<li>Utica Church of Christ</li>
	<li>Utica Methodist Church</li>
	<li>Northside Church of Christ</li>
  </ul>
</div>
  <div class='sidebar-menu'>Civic Organizations<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Clubs & Organizations</li>
	<li>Non-Profit</li>
		<li>Utica Sertoma</li>
    <li>Utica Shrine Club</li>
	<li>Resale Store/Non Profit</li>
  </ul>
</div>
  <div class='sidebar-menu'>Business & Professional Services<div class='expand'></div></div>
<div class='sub-menu'>
	<ul>
  <li>Water Conditioning</li>
	<li>Kennel</li>
	<li>Insurance</li>
	<li>Lender</li>
	<li>Electric & Natural Gas</li>
    </ul>
</div>
  <div class='sidebar-menu'>Art, Design, & Entertainment<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Photographers</li>
	<li>Vinyl Graphics & Design</li>
	<li>Newspaper</li>
	<li>Web Development</li>
	<li>Computer Technology</li>
	<li>Bowling</li>
    </ul>
</div>
  <div class='sidebar-menu'>Health & Beauty<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Barber Shop</li>
	<li>Beauty Salon</li>
		<li>Hair Flair Beauty</li>
		<li>Kim's Trims</li>
		<li>Patsy's Beauty Shop</li>
	<li>Chiropractic & Nutritional</li>
	<li>Pharmacies</li>
	<li>Veterinarians</li>
		<li>DVM-VMD Clinic</li>
	<li>Nursing Homes</li>
	<li>Tanning</li>
    </ul>
</div>
  <div class='sidebar-menu'>Food & Dining<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>Orchards & Farm Markets</li>
		<li>Branstool Orchard</li>
		<li>Legend Hill Orchard</li>
		<li>Farm Market</li>
	<li>Grocers-Retail</li>
	<li>Pizza</li>
		<li>Big Red's Pizza</li>
		<li>Nick's Village Pizza</li>
		<li>Stone Bros Pizza</li>
		<li>Ice Cream Manufacturers</li>
	<li>Restaurants</li>
		<li>Watts Restaurant</li>
		<li>Pioneer Restaurant</li>
    </ul>
</div>
  <div class='sidebar-menu'>Shopping<div class='expand'></div></div>
<div class='sub-menu'>
  <ul>
	<li>5+10 Store</li>
	<li>Custom Embroidery</li>
		<li>Got Gear 4 U</li>
		<li>Hickory Grove Designs</li>
	<li>Feed/Hardware</li>
	<li>Fireworks</li>
	<li>Outdoor Power Equipment</li>
	<li>Tree Farm</li>
    </ul>
</div>
</div>

$maincolor:  #8aa8bd;
$accent: #A8CC96;

.expand {
  float: right; 
  display: inline; 
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  margin: 0 10px;
}

h1 {
  font-size: 2.25em;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 900;
  margin: 0 20px;
  color:$maincolor;
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-bottom: 10px
}

h2 {
  font-size: 36px;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  letter-spacing: .5px;
}

body, input, textarea {
  font-weight: 200;
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.54;
	font-size: 16px;
	background: #efefef;
	-webkit-font-smoothing: subpixel-antialiased;
}

.sidebar-1 {
  /* these are the styles for the container around the menu */
  text-align: right;
  padding: 0px;
  display:inline-block;
  box-shadow: 0 0px 1px 0 rgba(0,0,0,.2);
  margin-left: 20px;
}

.sidebar-menu {
  /*this style impacts the look of the heading containers. */
  cursor: pointer;
  padding: 10px;
  background: #ffffff;
  position: relative;
  color:$maincolor;
  border-bottom: 1px solid #dedede;
  font-size: 1.5em;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  letter-spacing: .5px;
  padding-right: 50px;
  &:before, &:after {
    content: "";
    width: 3px;
    height: 25px;
    background: $accent;
    border-radius: 3px;
    position: absolute;
    right: 22px;
    top: calc(28.7px - 12.5px);
    transition: all .2s ease;
  }
  &:after {
    transform: rotate(90deg);
  }
}

.open:before {
  animation: turn-plus;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

.open:after {
  animation: turn-crossbar;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

@keyframes turn-plus {
  0% {
    transform: translate(0,0);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes turn-crossbar {
  0% {
    transform:none;
    transform: rotate(90deg)
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

.sidebar-menu:hover {background: darken(#FFFFFF, 5%);}

.sub-menu {
  /*this style is for the sub-menu box*/
  color: darken($maincolor,30%);
  border-bottom: 1px solid #dedede;
  font-size: 1em;
  display: none;
  &:last-child {
    border-bottom: 0;
  }
}

.sub-menu li:hover {
  background: #cccccc;
  cursor: pointer;
}

.sub-menu li {
  /*this styles individual elements in a sub-menu*/
  padding: 10px;
  background: #d7d7d7;
  border-bottom: 1px solid #dedede;
  &:last-child {
    border-bottom: 0;
  }
}
.sub-menu ul {
  /*this just 0s out a bunch of stuff so that it plays nice with the list stylings*/
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 540px) {
  .sidebar-menu {
    font-size: 1em;
    font-weight: 400;
  }
  .sub-menu {
    font-weight: 400;
  }
  .sidebar-1 {
    margin: 0;
    width: 100%
  }
  .sidebar-menu:after, .sidebar-menu:before {
    top: calc(23.5px - 12.5px);
  }
}

$(document).ready(function () {
  
    $('.sidebar-menu').mouseenter(function(){
      $(this).children('.expand').addClass('turn');
    });
  
    $('.sidebar-menu').mouseleave(function(){
      if ($(this).hasClass('open')) {
      } else {
        $(this).children('.expand').removeClass('turn');
      }
    });
    
    $('.sidebar-menu').click(function () {
      var $this = $(this);
      if ($this.hasClass('open')) {
        $('.sidebar-menu').removeClass('open');
        $('.sub-menu').stop(true).slideUp("fast");
        $('.expand').removeClass('turn');        
        $this.removeClass('open');
        $this.children('.expand').removeClass('turn');
        $this.next().stop(true).slideUp("fast");
      }    
      else {
        $('.sidebar-menu').removeClass('open');
        $('.sub-menu').stop(true).slideUp("fast");
        $('.expand').removeClass('turn');
        
        $this.addClass('open');
        $this.children('.expand').addClass('turn');
        $this.next().stop(true).slideDown("fast");
        }
    });
  
});