Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Нужна помощь! (https://javascript.ru/forum/jquery/80397-nuzhna-pomoshh.html)

laimas 12.06.2020 12:17

Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в 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> с соответствующими стилями и все.

Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо.

zulfukar 13.06.2020 00:21

Вложений: 1
Я все добавил, но когда не заработало удалил. Пытался прикрутить другое меню но у него были свои недостатки.

В конечном счете выяснилось, что (не измененный) код прекрасно работает в опере (кажется Вы на нем и смотрели сайт).
Но, если удалить код
$(window).resize(isMenu);
и
$(window).resize(Res);

то работает и в мозилле. Но в хроме работать никак не хочет. А я все это время его именно в хроме проверял. После удаления кода приведенного выше в хроме при входе на сайт меню в раскрытом виде расположено слева и при клике на кнопку toggle перемещается в правую часть сайта, а при повторном клике на toggle скрывается. Естественно все это я просматриваю с телефона!

Итак, в мозилле и опере все работает (сейчас это можно посмотреть на сайте, зайдя с телефона). Причем в опере работает без всяких удалений (т.е. код который я привел в первом сообщении нормально работает в опере).
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.
На картинке вид меню в браузере хром.

laimas 13.06.2020 09:30

Цитата:

Сообщение от zulfukar
Я впервые вижу, чтобы джава в разных браузерах по разному себя вел.

Каждый браузер "видит мир" по своему и не только JS, но и CSS, и эти "разносторонние их взгляды" давно уже притча во языцех, а не сегодня, завтра, это случилось.

Я уже говорил - такое простое мобильное меню вполне может обойтись и без JS. Вот одно из них в виде урока - это одно и тоже меню (причем более чем с двумя уровнями) работающее на большом разрешении как горизонтальное, а на малых как вертикальное.

В CSS правилах встречается -moz..., -webkit..., progid:..., это как раз чтобы удовлетворить запросы всего "зоопарка браузеров".

zulfukar 21.06.2020 15:45

Цитата:

Сообщение от laimas (Сообщение 525729)
Среди браузеров, браузер 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.

laimas 21.06.2020 16:09

На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.

zulfukar 21.06.2020 16:15

Цитата:

Сообщение от laimas (Сообщение 526207)
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.

так это меню тоже поддерживают все мобильные устройства. Проблема только на ipad.
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь.

laimas 21.06.2020 16:22

Цитата:

Сообщение от zulfukar
Проблема только на ipad.

У меня нет моб. устройств этого бренда, я не могу ничего проверить, но я могу сказать точно, что на этих устройствах возникает проблема с css :hover. Об этом много в сети написано, если только в этом проблема, почитайте как ее решают, ну или подключите jQuery Mobile. Вы же используя jQuery не задумываетесь о поддержке js-кода различными браузерами, это за вас делает jQuery. Это же самое возлагает на себя и jQuery Mobile.

zulfukar 21.06.2020 16:24

Цитата:

Сообщение от laimas (Сообщение 526210)
К меня нет моб. устройств этого бренда, я не могу ничего проверить,

у меня тоже нет. я смотрю в отладчике как Вы учили.

laimas 21.06.2020 16:32

Цитата:

Сообщение от zulfukar
я смотрю в отладчике как Вы учили

Ну отладчик браузера еще может более менее показать как будет выглядеть верстка, а вот что касается событий и прочего, это считать "точь в точь как на моб. устройстве" нельзя. Например, отключите эмуляцию сенсорного ввода в отладчике при просмотре в мобильном эмуляторе и проблемы не будет.

Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу.

zulfukar 21.06.2020 17:25

Цитата:

Сообщение от Rise (Сообщение 526218)
zulfukar,
Почитай как viewport meta tag работает, он был введен apple, сейчас это основа responsive design для mobile browsers.

у меня нет проблем с отображением. Мне нужно чтобы на ipad-е в моем меню подменю раскрывалось при помощи клика.


Часовой пояс GMT +3, время: 18:02.