Почти тоже самое, о чем я писал ранее. При обновлении страницы меню в раскрытом виде стоит слева. После клика на 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, время: 20:57. |