Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 12.06.2020, 13:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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 в 14:02.
Ответить с цитированием
  #22 (permalink)  
Старый 13.06.2020, 01:21
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

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

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

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

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

Последний раз редактировалось zulfukar, 13.06.2020 в 01:35.
Ответить с цитированием
  #23 (permalink)  
Старый 13.06.2020, 10:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

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

Последний раз редактировалось laimas, 13.06.2020 в 11:32.
Ответить с цитированием
  #24 (permalink)  
Старый 21.06.2020, 16:45
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 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.
Ответить с цитированием
  #25 (permalink)  
Старый 21.06.2020, 17:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
Ответить с цитированием
  #26 (permalink)  
Старый 21.06.2020, 17:15
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
На айфоне, как и на прочих моб. устройствах экран сенсорный, там иные события. Можете как и с уроком найти готовое меню с поддержкой и моб. устройств. А если охота свое допилить, могу посоветовать jQuery Mobile, что это, вкратце можно узнать в сети.
так это меню тоже поддерживают все мобильные устройства. Проблема только на ipad.
это 4-ое меню, которое я ставлю на сайт. У каждого свои минусы. Я весь сайт сделал быстрее, чем это меню, с которым(и) больше месяца маюсь.
Ответить с цитированием
  #27 (permalink)  
Старый 21.06.2020, 17:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от zulfukar
Проблема только на ipad.
У меня нет моб. устройств этого бренда, я не могу ничего проверить, но я могу сказать точно, что на этих устройствах возникает проблема с css :hover. Об этом много в сети написано, если только в этом проблема, почитайте как ее решают, ну или подключите jQuery Mobile. Вы же используя jQuery не задумываетесь о поддержке js-кода различными браузерами, это за вас делает jQuery. Это же самое возлагает на себя и jQuery Mobile.
Ответить с цитированием
  #28 (permalink)  
Старый 21.06.2020, 17:24
Аспирант
Отправить личное сообщение для zulfukar Посмотреть профиль Найти все сообщения от zulfukar
 
Регистрация: 10.06.2020
Сообщений: 43

Сообщение от laimas Посмотреть сообщение
К меня нет моб. устройств этого бренда, я не могу ничего проверить,
у меня тоже нет. я смотрю в отладчике как Вы учили.
Ответить с цитированием
  #29 (permalink)  
Старый 21.06.2020, 17:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Действительно "полноценные" эмуляторы, например, для Андроид, это эмуляторы в Android Studio IDE. Есть подобная среда и для iOS, на все ли платформы она есть и есть ли у нее подобные эмуляторы я сказать не могу.
Ответить с цитированием
  #30 (permalink)  
Старый 21.06.2020, 18:06
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,449

zulfukar,
Почитай как viewport meta tag работает, он был введен apple, сейчас это основа responsive design для mobile browsers.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь яваскриптеров espltd Элементы интерфейса 2 03.03.2017 10:38
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 22:33
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 18:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 21:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17