Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в menu.css, а поэтому и нет никакой реакции.
Вообще принцип создать такое простое по структуре меню только на css следующий: <style> label { cursor: pointer; } li label { display: inline-block; width: 160px; } .btmenu { position: absolute; top: 5px; right: 5px; font-size: 32px; font-weight: bold; } #bt { display: none; } #bt:checked + .menu { right: 0; } .menu { padding: 0; background-color: #5D5D5D; color: #fff; width: 200px; overflow: hidden; position: absolute; top: 30px; right: -200px; transition: right 0.5s; } .menu ul { display: none; padding: 10px; } .menu li { list-style: none; padding: 3px 5px; cursor: pointer; } .menu input { float: right; } .menu input:after { content: '►'; width: 15px; height: 15px; background-color: #5D5D5D; color: #fff; } .menu input:checked:after { content: '▼'; } .menu input:checked + ul { display: block; } </style> <label class="btmenu" for="bt">≡</label><input type="checkbox" id="bt" /> <ul class="menu"> <li> <label for="m1">Submenu 1</label><input type="checkbox" id="m1" /> <ul> <li>Item 1-1</li> <li>Item 1-2</li> <li>Item 1-3</li> </ul> </li> <li> <label for="m2">Submenu 2</label><input type="checkbox" id="m2" /> <ul> <li>Item 2-1</li> <li>Item 2-2</li> <li>Item 2-3</li> </ul> </li> <li> <label for="m3">Submenu 3</label><input type="checkbox" id="m3" /> <ul> <li>Item 3-1</li> <li>Item 3-2</li> <li>Item 3-3</li> </ul> </li> </ul> Думаю, что в сети можно найти готовые хорошие решения таких чисто css меню. Вы вязли нечто чужое и, видимо, как есть и впихнули себе, получив различные проблемы. Не стоит считать себя лузером только потому, что вся эта кухня программная на английском. Много описано и на родном языке, так что и чисто по русски можно не быть "челядью", если читать и изучать. ;) Среди браузеров, браузер Firefox имеет отладчик, за мелким исключением, русифицированный, можно производить отладку или хотя бы контролировать, что на ваших страницах. А в ней подключается шрифт иконок icomoon. Если выделить кнопку поиска, то в отладчике в ее стилях можно видеть, что к этой кнопкой используется этот шрифт, а если раскрыть в инспекторе кода код кнопки и выделить в ней псевдоселектор ::before, то в правилах ее стилей увидим код какого символа этого шрифта используется - content: "\e926"; Конечно же, в шрифте icomoon есть и символ ≡, и его нужно точно также использовать в кнопке меню, а не рисовать линии посредством span. Да и какая ссылка с картинкой может быть у этой кнопки вызывающей меню, как это у вас имеет место быть? Это должно быть только <button></button> с соответствующими стилями и все. Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо. |
Вложений: 1
Я все добавил, но когда не заработало удалил. Пытался прикрутить другое меню но у него были свои недостатки.
В конечном счете выяснилось, что (не измененный) код прекрасно работает в опере (кажется Вы на нем и смотрели сайт). Но, если удалить код $(window).resize(isMenu); и $(window).resize(Res); то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона! Итак, в мозилле и опере все работает (сейчас это можно посмотреть на сайте, зайдя с телефона). Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере). Я впервые вижу, чтобы джава в разных браузерах по разному себя вел. На картинке вид меню в браузере хром. |
Цитата:
Я уже говорил - такое простое мобильное меню вполне может обойтись и без JS. Вот одно из них в виде урока - это одно и тоже меню (причем более чем с двумя уровнями) работающее на большом разрешении как горизонтальное, а на малых как вертикальное. В CSS правилах встречается -moz..., -webkit..., progid:..., это как раз чтобы удовлетворить запросы всего "зоопарка браузеров". |
Цитата:
Сайт тот же: _http://new.313news.net Проблема только если войти на сайт с ipad при размере экрана больше 1024 (901 < ∞), когда меню находится в раскрытом (горизонтальном) виде при наведении мышью на пункт меню должно выпадать подменю (как это происходит, если зайти на сайт с компа). Но так как на ipad нет мыши то при клике на пункт меню одновременно с выпадением меню обновляется страница сайта. Пробовал в скрипте прописать вместо "mouseenter mouseleave" "click", но это не помогло. Вот скрипт: var ww = document.body.clientWidth; $(document).ready(function() { $(".navv li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent"); }; }) $(".toggleMenu").click(function(e) { e.preventDefault(); $(this).toggleClass("active"); $(".navv").toggle(); }); adjustMenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { if (ww < 900) { $(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { $(".navv").hide(); } else { $(".navv").show(); } $(".navv li").unbind('mouseenter mouseleave'); $(".navv li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww >= 900) { $(".toggleMenu").css("display", "none"); $(".navv").show(); $(".navv li").removeClass("hover"); $(".navv li a").unbind('click'); $(".navv li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } } и стили Код:
.navv { P.S в шрифте icomoon символ ≡ был очень уродливым, поэтому я оставил вывод с помощью span. |
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
|
Цитата:
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь. |
Цитата:
|
Цитата:
|
Цитата:
Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу. |
Цитата:
|
Часовой пояс GMT +3, время: 18:02. |