Напишу на CSS выдвижение меню, более не буду ничего смотреть, некогда.
В CSS:
#menu > ul {
width: 300px;
background: #778899;
background: rgba(119, 136, 153);
text-align: left;
position: absolute !important;
top: 48px;
/* добавили это */
right: -300px;
transition: right 0.5s;
}
/* и добавили это */
#menu > ul.show {
right: 0;
}
В коде страницы сразу добавляем кнопку скрытой для большого разрешения (hidden-md)
<div class="core" id="menu">
<div class="navbar hidden-md">
<strong>
<!-- значение атрибутов расставите -->
<a href="#">
<img src="#" alt="#" />
</a>
</strong>
<button class="toggle" title="Меню">
<span></span><span></span><span></span>
</button>
</div>
.....
В JS:
(function($) {
$.fn.menu = function() {
//передавать параметр right не надо, он определяется в CSS
var b = this.find('button'), //кнопка
m = this.children('ul'); //меню
this.each(function() {
//управляем анимацией меню
b.on('click', function() {
m.toggleClass('show')
});
//код далее
PS. Я бы это b = this.find('button'), //кнопка, заменил на this.children('.navbar'), //кнопка, ибо не понять зачем strong с содержимым, а если нужен, то почему по нему нельзя меню показывать.