Создание мобильной версии меню при помощи JS

Вопросы-ОтветыРубрика: JavaScriptСоздание мобильной версии меню при помощи JS
0 +1 -1
Михаил asked 7 месяцев ago

Добрый день, Леонид! 
При самостоятельном написании мобильной версии меню для своего сайта столкнулся со следующей проблемой.
При выборе пункта меню (например “контакты”) я перехожу в соответствующий раздел, однако меню остается открытым. Как можно сделать, чтобы меню автоматически закрывалось при выборе одного из его пунктов.
Возможно ли это реализовать, что-то дописав в уже имеющийся JS код, или нужно принципиально по-другому собирать меню?
Также как можно реализовать плавное открытие и закрытие меню?
Я в JS пока еще полный, поэтому было бы благодарен Вам за помощь!
Ссылка на сайт:
http://lysakov.h1n.ru
На сайте использовался следующий JS и CSS код
<script>
function myFunction() {
var x = document.getElementById(“myTopnav”);
if (x.className === “topnav”) {
x.className += ” respnav”;
} else {
x.className = “topnav”;
}
}
</script>
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav .icon {
display: none;
}
.menu {
float: right;
padding: 8.5px 0;
}
@media screen and (max-width: 768px) {
.navcont, .menu {
float: none;
padding: 0px 0;
}
.menu a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.respnav {
position: fixed;
}
.topnav.respnav a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.respnav a {
float: none;
display: block;
text-align: left;
}
}

1 ответ
0 +1 -1
Тушов Леонид Админ. answered 7 месяцев ago

Михаил, добрый вечер. А почему не использовать библиотеку jQuery? 
Я вот реализовал так:
Ответить на Создание мобильной версии меню при помощи JS
Ну, а теперь собственно мои изменения:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<title>Cоздание сайтов</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700%7CMuli%3A300%2C300italic%2C400%2C400italic%2C600%2C600italic%2C700%2C700italic%2C900%2C900italic%7CPlayfair+Display%3A400%2C400italic%2C700%2C700italic&amp;subset=latin%2Clatin-ext">
	<link rel="stylesheet" type="text/css" href="lusakov_files/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
	function myFunction() {
	 	if ( jQuery('.topnav .menu').is(":visible") ) {
	 		// если меню открыто, то закрываем его:
	 		// .is(":visible") - проверяет отображается ли элемент на странице
	 		jQuery('.topnav .menu').hide('fast'); // fast - это скорость работы данной функции
	 	} else {
	 		// меню закрыто, наоборот открываем:
	 		jQuery('.topnav .menu').show('fast');
	 	}
	}
	jQuery(document).ready(function($) {
		// скрываем меню на мобильных при клике по любой ссылке из этого меню:
		if (jQuery(window).width() < 769) {
			jQuery('.topnav .menu a').click(function(event) {
				jQuery('.topnav .menu').hide('fast');
			});
		}
		// код плавной прокрутке при переходе по ссылке на анкор
		jQuery("a[href*=\\#]").bind("click", function(e){
	        var anchor = jQuery(this);
	        jQuery('html, body').stop().animate({
	        scrollTop: jQuery(anchor.attr('href')).offset().top
	        }, 1000);
	        e.preventDefault();
	    });
	});
	</script>
</head>


еще я немного поправил Ваш CSS в частности здесь:

@media screen and (max-width: 768px) {
  .navcont, .menu {
    float: none;
    padding: 0px 0;
  }
  .topnav .menu {
    display: none;
  }
  /*.menu a {
    display: none;
  }*/
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav {
    position: fixed;
  }
  .topnav a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav a {
    float: none;
    display: block;
    text-align: left;
  }
}
ПОДЕЛИТЬСЯ