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