Форум

tema1508 · #1 (**permalink**) 19.03.2018, 21:32

Есть меню вида (см.ниже), необходимо чтобы в десктопной версии были активны все ссылки меню, а в мобильной осуществлялся переход только по самой последней в иерархии т.е. только по Игровые, Трансформеры, Планшеты на Android, Планшеты на Windows
Пожалуйста, подскажите, как такое можно реализовать?
(Сделать два меню, одно из которых выводить в десктопной версии, а другое в мобильной не вариант)

<ul class="menu-category">
	<li class="menu-category-item"><a href="/">Ноутбуки, планшеты</a>
		<div class="menu-category-content">
			<ul>
				<li><a href="/">Ноутбуки</a>
					<ul class="menu-category-subcontent">
						<li><a href="/">Игровые</a></li>
						<li><a href="/">Трансформеры</a></li>
					</ul>
				</li>
				<li><a href="/">Планшеты</a>
					<ul class="menu-category-subcontent">
						<li><a href="">Планшеты на Android</a></li>
						<li><a href="/">Планшеты на Windows</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
</ul>

рони · #2 (**permalink**) 19.03.2018, 21:59

tema1508,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".menu-category").on("click", "a", function(event) {
    $(window).width() > 768 || $(this).parents(".menu-category-subcontent").length || event.preventDefault()
})
});
  </script>
</head>

<body>
<ul class="menu-category">
  <li class="menu-category-item"><a href="/">Ноутбуки, планшеты</a>
    <div class="menu-category-content">
      <ul>
        <li><a href="/">Ноутбуки</a>
          <ul class="menu-category-subcontent">
            <li><a href="/">Игровые</a></li>
            <li><a href="/">Трансформеры</a></li>
          </ul>
        </li>
        <li><a href="/">Планшеты</a>
          <ul class="menu-category-subcontent">
            <li><a href="">Планшеты на Android</a></li>
            <li><a href="/">Планшеты на Windows</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </li>
</ul>


</body>
</html>

laimas · #3 (**permalink**) 19.03.2018, 22:46

Сообщение от рони

$(window).width() > 768

Это еще не означает, что мобильное устройство.

Да и это будет возвращать результат не желаемый.

j0hnik · #4 (**permalink**) 20.03.2018, 02:30

// Определяем тип устройства.
function is_touch_device() {
	return (('ontouchstart' in window)
		|| (navigator.MaxTouchPoints > 0)
		|| (navigator.msMaxTouchPoints > 0));
}

if (!is_touch_device()) {
	alert("Desctop");
}
else alert("Mobile");

Пользуйтесь друзья

laimas · #5 (**permalink**) 20.03.2018, 05:14

j0hnik,
не получится, проблемы с поддержкой, а моб. устройств туево тучево.

j0hnik · #6 (**permalink**) 20.03.2018, 05:39

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

j0hnik · #7 (**permalink**) 20.03.2018, 05:47

laimas,
Проблемы у каких браузеров?

laimas · #8 (**permalink**) 20.03.2018, 05:52

Ослик, у сафари есть. Да и то что нет тачпада, есть не показатель настольной системы.

j0hnik · #9 (**permalink**) 20.03.2018, 07:46

laimas, я вам тут подарочек приготовил.

запускать на телефоне

<script>
var i = 0;
(function run(){
navigator.vibrate(i++);
setTimeout(run, i*4);
})();
</script>

laimas · #10 (**permalink**) 20.03.2018, 07:50

Сообщение от j0hnik

я вам тут подарочек приготовил

Бесполезный для меня, надо сказать, подарочек.

Я не пользуюсь телефоном и не собираюсь.

Форум

Справочник

Discord чат

Курсы javascript