My website is currently equipped with what used to be a fully functioning push menu, but now all of the sudden after playing around with the css, it doesn't want to work. I will provide my Code:
HTML
<div id="right">
<div id="Top">
<div id="menubar">
<a id="menubarheader">DrumCenter</a>
<a href="#menu" id="button" class="buttonicon"></a>
<a href="#" id="searchlink" class="searchlink"></a>
</div>
</div>
</div>
CSS
#right {
width: 100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
margin: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#menu {
float:left;
width: 80%;
height: 100%;
}
#menu li {
background-color: white;
border-bottom: 1px solid #c8c8c8;
}
#Top {
width: inherit;
height: 80px;
margin: 0px;
}
#menubar, #menubarheader {
width: inherit;
height: 80px;
}
#menubar {
min-width: 250px;
position: absolute;
background: #fff;
border-bottom: 3px solid #ABABA0;
line-height: 80px;
}
#button, #menubarheader, #searchlink {
position: absolute;
vertical-align: middle;
font-weight: lighter;
}
#button {
text-decoration: none;
padding-left: 5%;
}
.buttonicon {
font-family: "glyphs";
text-decoration: none;
font-size: 230%;
color: gray;
}
.buttonicon:before {
content: "\e696";
}
#searchlink{
text-decoration: none;
padding-left: 87%
}
.searchlink{
font-family: "icomoon";
text-decoration: none;
font-size: 150%;
color: gray;
}
.searchlink:before {
content: "\e67f";
}
#menubarheader {
text-align: center;
color: #0099FF;
font-size: 200%;
vertical-align: middle;
}
Javascript
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'fast', function() {
$('#button');
});
},
function() {
$('#right').animate({ left: 0 }, 'fast', function() {
$('#button');
});
}
);
Before you ask, yes I have linked the proper jquery in my HTML, I just didn't provide it on here. What I would like to know is why this has ceased to work, and how I can fix this? I am very confused about this. Thank you! If you would like to see my website that I am talking about, you can go to (http://www.codesrce.com/thedrumcenter) But you will only see what I am talking about if your screen width is 1399px or less because that is the mobile site.
you're writing the script before jQuery is loaded, cut it and then paste it after all the <script></script> tags are called, and it will be fixed!