Помогите разобраться с выпадающим меню на js?

вопрос

Есть у меня тестовый сайт с шаблоном в котором стоит выпадающее меню, хочу это меню перенести на свой основной шаблон, вроде и стили и классы скопировал, js вставил, а меню не открывается... Помогите разобраться пожалуйста.
https://jsbin.com/

  <div class="righttoch">
<div class="navis">
<img src="http://test.base-road.ru/templates/imax-white/images/nav.svg" class="menu_head" alt="" />
<ul class="menu_body">
<div class="triangle-full-1"></div>
<li><a href="#">Раздел 1</a></li>
<li><a href="#">Раздел 2</a></li>
</ul>
</div>
  <div class="dark"></div>
  </div>
  
  
  <script type="text/javascript">
$(document).ready(function () {
	$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
	$('ul.menu_body').slideToggle('medium');
    });
	$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ }, 50 );
    });
	$('ul.menu_body li a').mouseout(function () {
	$(this).animate({  }, 50 );
    });
});
</script>

.righttoch{
  margin-top: 22px !important;
float: right;
  background: #000;
}
.righttoch > .navis {margin-top: 14px; transition: 0.4s;}
.righttoch > .autnav-1 > .login-button {margin-top: 6px; transition: 0.4s;}
.navis{
cursor: pointer;
}
.navis{
float: right;
margin-top: 18px;
margin-left: 5px;
cursor: pointer;
transition: 0.4s;
margin-right: 1px;
position: relative;
}
.menu_head{width: 22px; height: 22px; float: right;}
.menu_head img {width: 100%;}
.menu_body {display:none;
padding: 0px 10px 10px 10px;
background: #000;
border-radius: 2px;
font-size: 13px;font-weight: 300;
width:800px;
position: absolute;
top: 22px; 
left: -775px;
list-style: none;
}
.menu_body li{background:#111; width: 15.3%; font-family: 'Roboto', sans-serif; margin:10px 10px 0px 0px;float: left; text-align: center;}
.menu_body li.alt{background:#191919; width: 15.3%; font-family: 'Roboto', sans-serif; float: left; text-align: center;}
.menu_body li a:hover{ transition: all 0.5s; background: #5f9e3d; color: #fff;}
.menu_body li a{color:#d1d1d1; text-decoration:none; padding:8px 9px; display:block; border-radius: 2px;
}
.triangle-full-1{
margin: -8px 0px 0px 0px;
 width: 0;
 right: 5px;
position: absolute;
 height: 0;
 border-bottom: 8px solid #111;
border-left: 9px solid transparent;
 border-right: 9px solid transparent;
}
.dark {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(http://test.base-road.ru/templates/imax-white/images/dark.png);
  z-index: 7777;
}