Сообщение от 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.