Как сделать выезжающее меню при свайпе JQuery?

Question

[Даниил Сухих]

Есть кнопка в мобильной версии сайта при нажатии на которую появляется окно на весь экран в котором меню.
Как сделать что-бы при свайпе от правой части экрана появлялось это окно а при свайпе от от левого скрывалось?

<nav class="menutf">
			<div class="linem"></div>
			<div class="linem"></div>
			<div class="linem"></div>
</nav>
<div class="navtf">
			<div class="closemenu">ЗАКРЫТЬ</div>
		</div>

.menutf {
	cursor: pointer;
	transition: 0.7s;
	position: absolute;
	width: 80px;
	height: 80px;
	background: #147de0;
	top: 0;
	right: 0;
}

.linem {
	transition: 0.7s;
	width: 70px;
	height: 7px;
	background: #fff;
	margin: auto;
	margin-top: 23px;
}

.linem:first-child {
	margin-top: 7px;
	transition: 0.7s;
}

.navtf {
	position: absolute;
	width: 100%;
	z-index: 10000000;
	height: 10000vh;
	display: none;
	background: #4286f4;
	top: 0;
	left: 0;
}

.closemenu {
	float: right;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	margin: 5px 10px;
	padding: 2px 10px;
	display: block;
	cursor: pointer;
	background: #f49542;
}

$('.menutf').click(function() {
		$('.navtf').fadeIn();
	});

	$('.closemenu').click(function() {
		$('.navtf').fadeOut();
	});

Собранный код: https://jsfiddle.net/xbe1f1bs/6/

Answer 1

[Dymok]

Как создать свайп-меню на мобильной версии сайта?

Answer 2

[Aleksey Solovyev]

https://api.jquerymobile.com/swipeleft/

$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );

где fn - Ваша функция.

ps ну и используйте on()

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "active" );
});

Comments

[Даниил Сухих]

$( "#el" ).on( "swiperight", fn );
гдн #el нужно указать window?

[Aleksey Solovyev]

Если Вы по windows swipe делаете, то его...

В примерах обычно добавляют $(".swipe-area") (на весь экран которая), который и используют, но можно и document

[Даниил Сухих]

Aleksey Solovyev, подключил jquery mobile, но он изменил мои стили, как подключить его но не задействовать стили?

[Aleksey Solovyev]

Правильное решение: добавить атрибут data-role="none"

<label for="foo">
<select name="foo" id="foo" data-role="none">
	<option value="a">A</option>
	<option value="b">B</option>
	<option value="c">C</option>
</select>

ps А какие стили изменил?
Если #custom-collapsible и #custom-collapsible h3 a(ну или какие у Вас), то просто переопределите стили у себя

#custom-collapsible {
    width: 74% !important; 
    margin-left: 9px !important; 
    border-width: 0px !important; 
    background-color: white  !important;
}

#custom-collapsible h3 a {
    border-width: 0px !important; 
    background: white  !important;
}