Нужна помощь!

[laimas]

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

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

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

$(window).resize(isMenu);
и
$(window).resize(Res);

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

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

[laimas]

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

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

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

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

[zulfukar]

Среди браузеров, браузер 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]

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

[zulfukar]

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

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

[laimas]

Проблема только на ipad.

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

[zulfukar]

К меня нет моб. устройств этого бренда, я не могу ничего проверить,

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

[laimas]

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

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

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

[Rise]

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