Показать сообщение отдельно
  #24 (permalink)  
Старый 21.06.2020, 15: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.
Ответить с цитированием