Jquery
//плавный скрол меню
$(document).ready(function () {
// Обработчик кликов на ссылки с якорем и классом "btn-scroll"
$(".menu-smg a[href^='#']").click(function (event) {
var elementClick = $(this).attr("href");
var destination;
// Проверяем, находимся ли мы на текущей странице или на другой странице
if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
// Мы на главной странице, выполняем плавный скроллинг вниз
destination = $(elementClick).offset().top;
$('html, body').animate({
scrollTop: destination
}, 1100);
} else {
// Мы на другой странице, переходим на главную страницу с якорем в URL
destination = window.location.origin + '/#' + elementClick.substr(1);
window.location.href = destination;
}
return false;
});
});
//плавный скрол меню
//мобильное меню
(function(){
$(document).ready(function(){
$('.btn-menu').click(function (e) {
$(this).toggleClass('active');
});
if (window.screen.width <= 1000) {
$('.menu-animate-mobile a').click(function (e) {
$('.btn-menu').toggleClass('active');
$('.menu-animate-mobile').slideToggle();
});
}
});
})();
//мобильное меню
//смена класса btn mobile menu
(function(){
if(window.screen.width<=982){
$(document).ready(function(){
$('.btn-menu').click(function (e) {
$(this).toggleClass('active');
});
});
}
})();
//смена класса btn mobile menu
HTML
<div class="menu-smg">
<a class="btn-menu">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</a>
<div class="menu-animate-mobile">
<?php wp_nav_menu([ 'theme_location' => 'custom-menu' ]); ?>
</div>
</div>
LESS
.menu-smg{
.btn-menu{
display: none;
text-decoration: none;
text-align: center;
color: #fff;
@media (max-width: 724px){
display: block;
}
.icon{
display: inline-block;
vertical-align: middle;
padding: 10px;
padding-top: 12px;
border-radius: 50%;
background: @color-1;
height: 23px;
width: 25px;
position: relative;
span{
display: block;
width: 25px;
height: 2px;
background: #fff;
margin: 4px 0;
transition: 0.3s all;
}
}
}
.active{
.icon{
span{
position: absolute;
&:nth-child(1){
transform: rotate(45deg);
top: 17px;
}
&:nth-child(2){
opacity: 0;
}
&:nth-child(3){
transform: rotate(-45deg);
top: 17px;
}
}
}
}
.menu-animate-mobile{
@media (max-width: 724px){
display: none;
position: absolute;
top: 110px;
background: #1b1f2a;
padding: 20px 0;
left: 0;
width: 100%;
z-index: 2;
}
}
ul{
padding: 0;
margin: 0;
li{
list-style: none;
display: inline-block;
vertical-align: text-top;
@media (max-width: 724px){
display: block;
text-align: center;
}
a{
display: block;
text-decoration: none;
padding: 20px 25px;
transition: 0.3s all;
color: #000;
position: relative;
@media (max-width: 724px){
padding: 15px;
}
&:hover{
&::before{
left: 25px;
right: 25px;
opacity: 1;
@media (max-width: 724px){
right: 40%;
left: 40%;
}
}
}
&::before{
content: '';
position: absolute;
left: 50%;
right: 50%;
height: 3px;
border-radius: 2px;
bottom: 0;
background: @color-1;
opacity: 0;
transition: 0.5s all;
@media (max-width: 724px){
bottom: 5px;
}
}
}
}
.current_page_item {
a{
color: @color-1;
}
}
}
}
function.php
//меню
if ( function_exists( 'register_nav_menus' ) )
{
register_nav_menus(
array(
'custom-menu'=>__('Главное меню'),
'footer-menu'=>__('Нижнее меню'),
)
);
}