#javascript #jquery #html #css #jpanelmenu
#javascript #jquery #HTML #css #jpanelmenu
Вопрос:
В настоящее время мой веб-сайт оснащен тем, что раньше было полностью функционирующим push-меню, но теперь внезапно, после игры с 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. для начала вы должны установить
z-index#buttonдля вашего значения большое число, чтобы оно отображалось#menubarheaderперед, а во-вторых, я не могу найти код js, который вы написали здесь, на вашем веб-сайте? где вы это написали?2. Да, z-index был установлен таким образом, чтобы ничто никогда не перекрывало этот элемент. Я попытался изменить это, но это ничего не исправило. У меня есть код в заголовке моего HTML. Я не понимаю, почему это меню просто перестало работать. Вчера все работало нормально, как здесь, но теперь это не работает. @AminJafari
3. Кроме того, это только мой мобильный сайт, поэтому, если ваш экран больше 1399 пикселей, вы получите десктопный сайт. @AminJafari
Ответ №1:
вы пишете скрипт до загрузки jQuery, вырезаете его, а затем вставляете после вызова всех <script></script> тегов, и это будет исправлено!
Комментарии:
1. К сожалению, я попробовал это сделать, но это ничего не дало. У меня был сценарий там, где он был вчера, и он работал нормально. Я так недоумеваю, почему он перестал работать.
2. Я только что понял, что когда я полностью удаляю элемент #searchlink, проблема устраняется. Есть какие-нибудь идеи о том, почему гиперссылка #searchlink будет мешать моей кнопке #? @аминджафари
3. но вы скопировали его после тега html, это означает, что он не читается! попробуйте скопировать его СРАЗУ ПОСЛЕ вызова тегов скрипта в теге head!
4. Хорошо, я понял, что вы сейчас говорите. Но это странно, это работает только тогда, когда я удаляю кнопку поиска из #menubarheader, которую я хотел бы сохранить, если это возможно. Какие-либо решения о том, как сохранить гиперссылку поиска, не мешая кнопке меню?
5. потому что вы это даете
padding-left:87%;. удалите его и расположите#searchlinkпо CSS слева и сверху, что вы можете сделать легко, потому что оно позиционируется абсолютно!