Почти тоже самое, о чем я писал ранее. При обновлении страницы меню в раскрытом виде стоит слева. После клика на toggle переходит в правцю часть. Еще раз кликаем на toggle и меню заходит за правый край сайта, но не исчезает. Его можно увидеть прокрутив сайт вправо.
Но при клике в другие места оно уже не исчезает. Я вставил Ваш код, можете посмотреть на сайте. |
Это с кодом который я публиковал - https://youtu.be/wiUeL81S6m0
Добавьте вывод в консоль в своем коде параметров меню, будут понятны баги, почему так у вас происходит. |
Даю пояснение к:
w = parseInt(m.css('width')); //ширина меню определенная в CSS, равная 300px
b.on('click', function() {
m.toggleClass('show').stop().animate({
[set.position]:
-w //к ширине меню взятой с отрицательным знаком
+ w * m.hasClass('show') //прибавляем ширину меню умноженную на булево значение m.hasClass('show')
//которое в начальном состоянии равно false (равно 0 в контексте умножения)
//поэтому -300 + 300 * 0 = -300
//а если меню открыто, то будет true (равно 1 в контексте умножения)
//поэтому -300 + 300 * 1 = 0
}, 300);
});
|
Цитата:
Цитата:
|
Цитата:
|
Для просмотра отображения на моб. устройствах не обязателен какой-то сервис, это сейчас могут делать и браузеры в отладчике. Выше видео, это в отладчике Opera. А вот как выглядит в отладчике FF https://youtu.be/Jraq1morMzQ
Таких огрехов как в Opera нет, но это не значит, что их нет вообще. Если оставить строки, о которых я говорил, то на моб. устройствах при смене ориентации (а это и есть изменение размера) меню торчит сбоку сразу. В общем, либо $(window).resize(и тут корректируем, но должным образом), либо, что лучше, через CSS. В этом меню вообще можно многим управлять посредством CSS. |
Кнопку как я говорил выше, можно сразу добавить, а управлять ее видимостью средствами бутстрапа (у вас не нем верстка), определив для каких разрешений она должна быть скрыта. Как это сделать можно прочесть в документации для соответствующей версии.
|
Напишу на 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 с содержимым, а если нужен, то почему по нему нельзя меню показывать. |
Цитата:
|
На css не работает?! Значит вы где-то в чем-то допускаете ошибку.
|
| Часовой пояс GMT +3, время: 17:52. |