Почему мое меню JQuery не работает внезапно?
Мой веб-сайт в настоящее время оснащен полностью функционирующим пуш-меню, но теперь, внезапно, поиграв с CSS, он не хочет работать. Я предоставлю мой код:
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');
});
}
);
Прежде чем вы спросите, да, я связал правильный jquery в своем HTML, я просто не предоставил его здесь. Я хотел бы знать, почему это перестало работать, и как я могу это исправить? Я очень смущен по этому поводу. Спасибо! Если вы хотите увидеть мой веб-сайт, о котором я говорю, вы можете перейти по адресу ( http://www.codesrce.com/thedrumcenter). Но вы увидите только то, о чем я говорю, если ширина вашего экрана составляет 1399 пикселей или меньше, поскольку это мобильный сайт.
1 ответ
Вы пишете сценарий до загрузки jQuery, обрезаете его и вставляете после того, как все <script></script> теги называются, и это будет исправлено!