12.06.2020, 12:17
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в 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> с соответствующими стилями и все.
Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо.
Последний раз редактировалось laimas, 12.06.2020 в 13:02.
|
|
13.06.2020, 00:21
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Я все добавил, но когда не заработало удалил. Пытался прикрутить другое меню но у него были свои недостатки.
В конечном счете выяснилось, что (не измененный) код прекрасно работает в опере (кажется Вы на нем и смотрели сайт).
Но, если удалить код
$(window).resize(isMenu);
и
$(window).resize(Res);
то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона!
Итак, в мозилле и опере все работает (сейчас это можно посмотреть на сайте, зайдя с телефона). Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере).
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.
На картинке вид меню в браузере хром.
Изображения:
|
s.jpg (295.9 Кб, 3 просмотров) |
Последний раз редактировалось zulfukar, 13.06.2020 в 00:35.
|
|
13.06.2020, 09:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от zulfukar
|
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.
|
Каждый браузер "видит мир" по своему и не только JS, но и CSS, и эти "разносторонние их взгляды" давно уже притча во языцех, а не сегодня, завтра, это случилось.
Я уже говорил - такое простое мобильное меню вполне может обойтись и без JS. Вот одно из них в виде урока - это одно и тоже меню (причем более чем с двумя уровнями) работающее на большом разрешении как горизонтальное, а на малых как вертикальное.
В CSS правилах встречается -moz..., -webkit..., progid:..., это как раз чтобы удовлетворить запросы всего "зоопарка браузеров".
Последний раз редактировалось laimas, 13.06.2020 в 10:32.
|
|
21.06.2020, 15:45
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
Среди браузеров, браузер Firefox имеет отладчик, за мелким исключением, русифицированный, можно производить отладку или хотя бы контролировать, что на ваших страницах.
|
Спасибо Вам за этот урок, очень полезная вещь, о существовании которой я не знал. Вообще за пару дней общения с Вами я многое узнал и сделал себе отличное меню, именно такое, какое хотел, с помощью отладчика исправил отображения во всех (основных) браузерах и устройствах (с разным разрешением экрана). Закончив работу я протестировал меню и выявил всего одну проблему - меню не раскрывается на ipad-е (смотрел с помощью отладчика!).
Сайт тот же: _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 {
list-style: none;
background:#fff;
color: #000; font-weight: 400;
}
.navv:before,
.navv:after {
content: " ";
display: table;
}
.navv:after {
clear: both;
}
.navv strong {background: #f00;
font-weight: normal;
padding: 10px 15px;
color: #fff;
display: block;
}
.navv ul {
list-style: none;
width: 15em;
float:left;
}
.navv a {
padding: 10px 15px;
color:#000;
}
.navv li {
position: relative;
}
.navv > li {
float: left;
border-top: 0px solid #ddd;
}
.navv > li > .parent {
background-image: url("../images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.navv > li > a {
display: block; padding: 0 1.2em; font-size: 18px; line-height: 36px; transition: all .2s ease-in-out;
}
.navv > li > a:hover {
display: block; padding: 0 1.2em;
}
.navv li ul {
position: absolute;
left: -9999px;
}
.navv > li.hover > ul {
left: 0;
}
.navv li li.hover ul {
left: 100%;
top: 0;
}
.navv li li a {
display: block;
background: #ddd;
position: relative;
z-index:100;
border-top: 1px solid #f0f0f0;
}
.navv li li a:hover {background-color: #f00; color: #fff;}
.navv li li li a {
background:#ccc;
z-index:200;
border-top: 1px solid #ddd;
}
@media screen and (max-width: 900px) {
.toggleMenu {
width: 30px; padding: 7px 0;
cursor: pointer;
outline: 0;
}
.toggleMenu > span {
display: block;
border-top: 2px solid #000;
margin-top: 6px;
}
.navv:before,
.navv:after {
content: " ";
display: table;
}
.active {
display: block;
}
.navv > li {
float: none;
}
.navv > li > .parent {
background-position: 95% 50%;
}
.navv li li .parent {
background-image: url("../images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.navv ul {
display: block;
width: 100%; top: 45px;
position: relative;
}
.navv > li.hover > ul , .navv li li.hover ul {
position: static;
}
} |
Помогите пожалуйста
P.S в шрифте icomoon символ ≡ был очень уродливым, поэтому я оставил вывод с помощью span.
|
|
21.06.2020, 16:09
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
|
|
21.06.2020, 16:15
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
|
так это меню тоже поддерживают все мобильные устройства. Проблема только на ipad.
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь.
|
|
21.06.2020, 16:22
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от zulfukar
|
Проблема только на ipad.
|
У меня нет моб. устройств этого бренда, я не могу ничего проверить, но я могу сказать точно, что на этих устройствах возникает проблема с css :hover. Об этом много в сети написано, если только в этом проблема, почитайте как ее решают, ну или подключите jQuery Mobile. Вы же используя jQuery не задумываетесь о поддержке js-кода различными браузерами, это за вас делает jQuery. Это же самое возлагает на себя и jQuery Mobile.
|
|
21.06.2020, 16:24
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от laimas
|
К меня нет моб. устройств этого бренда, я не могу ничего проверить,
|
у меня тоже нет. я смотрю в отладчике как Вы учили.
|
|
21.06.2020, 16:32
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от zulfukar
|
я смотрю в отладчике как Вы учили
|
Ну отладчик браузера еще может более менее показать как будет выглядеть верстка, а вот что касается событий и прочего, это считать "точь в точь как на моб. устройстве" нельзя. Например, отключите эмуляцию сенсорного ввода в отладчике при просмотре в мобильном эмуляторе и проблемы не будет.
Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу.
|
|
21.06.2020, 17:25
|
Аспирант
|
|
Регистрация: 10.06.2020
Сообщений: 43
|
|
Сообщение от Rise
|
zulfukar,
Почитай как viewport meta tag работает, он был введен apple, сейчас это основа responsive design для mobile browsers.
|
у меня нет проблем с отображением. Мне нужно чтобы на ipad-е в моем меню подменю раскрывалось при помощи клика.
|
|
|
|