Добрый день, Леонид!
При самостоятельном написании мобильной версии меню для своего сайта столкнулся со следующей проблемой.
При выборе пункта меню (например «контакты») я перехожу в соответствующий раздел, однако меню остается открытым. Как можно сделать, чтобы меню автоматически закрывалось при выборе одного из его пунктов.
Возможно ли это реализовать, что-то дописав в уже имеющийся 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;
}
}
Михаил, добрый вечер. А почему не использовать библиотеку jQuery?
Я вот реализовал так:
Ну, а теперь собственно мои изменения:
<!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&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; } }