Пример мобильного меню выполненного в виде панели снизу. Красивые эффекты появления, скроллинга, расположение абсолютно любых элементов и любой информации, красивые вращающиеся иконки.
Размещаем в header.php код сразу после окончания блока header.
Пример:
</header>
<div class="mob_nav desc_hide">
<div class="content_wrap">
<div class="item">
<img class="closebtn" src="/images/close_mobilmenu.png" alt="close">
<p class="title bold">Адрес</p>
<p class="fz20 mt20">ул. Тверская, дом 14</p>
<p class="fz14 gray_text">Работаем без выходных,<br>с 9.30 до 20.00 (в выходные до 18.00)</p>
<!-- <a href="https://yandex.com.ge/maps/213/moscow/?from=api-maps&ll=37.614659%2C55.723760&mode=routes&origin=jsapi_2_1_79&pt=%2C&rtext=~55.767003%2C37.602885&rtt=auto&ruri=~ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgo0NjYzNjQ1MjgzEj3QoNC%2B0YHRgdC40Y8sINCc0L7RgdC60LLQsCwg0KLQstC10YDRgdC60LDRjyDRg9C70LjRhtCwLCAyMC8zIgoNW2kWQhVpEV9C&z=12" class="bold tdu" target="_blank" rel="nofollow">Построить маршрут</a> -->
<p class="mt20 gray_text">Ближайшие метро</p>
<p class="black_text">Пушкиская, Чеховская, Тверская</p>
<p class="mt20 black_text bold">Как нас найти</p>
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A1b2b85f8326d970df21969f1d50e4df48652e1819ec42f18b2d95b25beefd231&source=constructor" width="100%" height="400" frameborder="0"></iframe>
<!-- <img class="howfindus" src="/img/map3dmobile.jpg" alt="howfindus">
<video controls preload="none" poster="/img/vhod_poster.jpg" class="custom_video video_preview" style=" max-width: 100%; height: 100%; ">
<source src="/img/vhod.mp4" type="video/mp4">
</video> -->
</div>
<div class="item">
<img class="closebtn" src="/images/close_mobilmenu.png" alt="close">
<p class="title bold">Телефон</p>
<a href="tel:+7 (495) 204 26 24" class="fz20 mt20">+7 (495) 204 26 24</a>
<p class="fz14 gray_color">Работаем без выходных, с 9.30 до 20.00 (в выходные до 18.00)</p>
<!-- <p class="bold tdu callback_trig">Обратный звонок</p> -->
</div>
<div class="item">
<img class="closebtn" src="/images/close_mobilmenu.png" alt="close">
<p class="title bold">Оценка за одну минуту</p>
<p class="undertitle fz20 mt20">Наведите камеру вашего смартфона на QR-код</p>
<a href="https://wa.me/79854205025" class="qr_block wa" target="_blank" rel="nofollow">
<img src="/images/qr_wa.png" alt="qr">
<div class="text">
<div class="title">Откроется<br>Whatsapp диалог с нами</div>
<div class="undertitle">Или нажмите на этот текст</div>
</div>
</a>
<a href="https://t.me/zotmoscow" class="qr_block" target="_blank" rel="nofollow">
<img src="/images/qr_tg.png" alt="qr">
<div class="text">
<div class="title">Откроется<br>Telegram диалог с нами</div>
<div class="undertitle">Или нажмите на этот текст</div>
</div>
</a>
</div>
<div class="item">
<img class="closebtn" src="/images/close_mobilmenu.png" alt="close">
<p class="title bold">Меню</p>
<div class="mob_menu">
<a href="/skupka-zolota.php/" class="link">Скупка золота</a>
<a href="/selling-silver.php/" class="link">Скупка серебра</a>
<a href="/branded_jewelry.php/" class="link">Скупка ювелирных изделий</a>
<a href="/branded_watch.php/" class="link">Скупка часов</a>
<a href="/buying_diamonds.php/" class="link">Скупка бриллиантов</a>
<a href="/zolotye-monety.php/" class="link">Скупка золотых монет</a>
<a href="/s-kamnyami.php/" class="link">Скупка ювелирных украшений с камнями</a>
<a href="/contacts.php/" class="link">Контакты</a>
</div>
<a href="tel:+7 (495) 204 26 24" class="fz20 bold">+7 (495) 204 26 24</a>
<!-- <p class="bold callback_trig">Обратный звонок</p> -->
<a href="mailto:zotmoscow@yandex.ru" class="tdu mt20">zotmoscow@yandex.ru</a>
<p class="mt20">ул. Тверская, дом 14</p>
<p class="fz14 gray_text">Работаем без выходных,<br>с 9.30 до 20.00 (в выходные до 18.00)</p>
</div>
</div>
<div class="nav_wrap">
<div class="item address">
<div class="ico"></div>
<div class="text">Адрес</div>
</div>
<div class="item phone">
<div class="ico"></div>
<div class="text">Телефон</div>
</div>
<div class="item rate">
<div class="ico">
<div class="effectbutton"></div>
<img class="rate_icon" src="/images/coinicon.png" alt="">
</div>
<div class="text">Оценка</div>
</div>
<!-- <a href="https://t.me/zotmoscow" class="item tg" target="_blank" rel="nofollow">
<div class="ico"></div>
<div class="text">Telegram</div>
</a>
<a href="https://wa.me/79854205025" class="item wa" target="_blank" rel="nofollow">
<div class="ico"></div>
<div class="text">WhatsApp</div>
</a> -->
<div class="item">
<div class="ico"></div>
<div class="text">Меню</div>
</div>
</div>
</div>
Добавляем для всего этого стили. Не забываем проставлять правильные пути изображениям.
CSS
/*СТИЛИ НИЖНЕЙ ПАНЕЛИ МОБИЛЬНОЕ МЕНЮ*/
.mob_nav {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 2;}
.mob_nav .nav_wrap {
display: flex;
justify-content: center;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background-color: #fff;}
.mob_nav .nav_wrap .item {
margin: 8px;
text-align: center;
text-decoration: none;
width: 60px;}
.mob_nav .nav_wrap .item .ico {
background: url(../images/svg/nav_menu.svg) no-repeat center/contain;
width: 50px;
height: 50px;
border-radius: 5px;
margin: auto;}
.mob_nav .nav_wrap .item .text {
font-size: 14px;
color: #9d9d9d;
margin-top: 5px;}
.mob_nav .nav_wrap .item.address .ico {
/*background-image: url(../images/svg/nav_address.svg);*/
background-image: url(../images/mapicon.png);
background-color: #ebebeb;
border-radius: 10px;}
.mob_nav .nav_wrap .item.map_item .ico {
background-image: url(../images/svg/nav_map.svg);}
.mob_nav .nav_wrap .item.phone .ico {
/*background-image: url(../img/svg/nav_phone.svg);*/
background-image: url(../images/phoneicon.png);
background-color: #ebebeb;
border-radius: 10px;}
.mob_nav .nav_wrap .item.rate .ico {
/*background-image: url(../images/svg/nav_rate.svg);*/
background-image: none;
background-color: #ffad00;
border-radius: 10px;}
.mob_nav .nav_wrap .item.active img.rate_icon {
display: none;}
.mob_nav .nav_wrap .item.active div.effectbutton {
display: none;}
.rotatecoin {
transform: rotateY(360deg);
transition: 2s;}
.mob_nav .nav_wrap .item.tg .ico {
background-image: url(../images/svg/nav_tg.svg);}
.mob_nav .nav_wrap .item.tg .text {
color: #229ED9;}
.mob_nav .nav_wrap .item.wa .ico {
background-image: url(../images/svg/nav_wa.svg);}
.mob_nav .nav_wrap .item.wa .text {
color: #20B038;}
.mob_nav .nav_wrap .item.active .ico {
background-image: url(../images/svg/nav_close.svg);}
.mob_nav .nav_wrap .item.active .text {
color: #DD784B;}
.mob_nav .content_wrap {
overflow: auto;
max-height: calc(100vh - 90px);
box-shadow: rgba(116, 116, 116, 0.2) 0px -10px 20px;
border-radius: 10px 10px 0px 0px;}
.mob_nav .content_wrap .item {
position: relative;
display: none;
padding: 34px 20px 25px;
background: #FFFFFF;}
.mob_nav .content_wrap .item p {
margin: 10px 0;}
.mob_nav .content_wrap .item a {
display: block;}
.mob_nav .content_wrap .item::before {
content: "";
position: absolute;
top: 7px;
left: calc(50% - 13px);
width: 26px;
height: 2px;
background: #E7E7E7;
border-radius: 50%;}
.mob_nav .mob_menu {
margin: 25px 0 40px;}
.mob_nav .mob_menu .link {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 15px 0 10px;
background: url(../images/svg/menu_arr.svg) no-repeat right 18px;}
.item img.closebtn {
position: absolute;
width: 20px;
top: 12px;
right: 20px;}
.item p.title {
background-color: #f6d24f;
padding: 10px;
border-radius: 10px;
color: #000000;
line-height: 1.2;
font-size: 22px;
font-weight: 700;
text-align: center;}
.item p.undertitle {
color: #000000;
line-height: 1.2;
font-size: 20px;
text-align: center;
font-weight: normal;}
/*СТИЛИ ЭФФЕКТА НА КНОПКУ*/
div.effectbutton {
position: absolute;
z-index: 0;
top: 50%;
right: 25px;}
.mob_nav .nav_wrap .item.rate .ico {
position: relative;}
img.rate_icon {
width: 100%;
height: auto;
position: relative;
z-index: 1;}
div.effectbutton:hover, div.effectbutton:focus {
color: #313133;
transform: translateY(-6px);}
div.effectbutton:hover::before, div.effectbutton:focus::before {
opacity: 1;}
div.effectbutton::after {
content: '';
width: 30px; height: 30px;
border-radius: 100%;
border: 5px solid #ffad00;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 7s infinite;}
div.effectbutton:hover::after, div.effectbutton:focus::after {
animation: none;
display: none;}
@keyframes ring {
0% {
width: 30px;
height: 30px;
opacity: 0;
}
30% {
width: 30px;
height: 30px;
opacity: 1;
}
60% {
width: 150px;
height: 150px;
opacity: 0;
}
100% {
width: 150px;
height: 150px;
opacity: 0;
}
Ну и конечно скрипты.
SCRIPTS
//скрипт вращения монетки в мобильном меню
$(document).ready(function(){
function rotatecoin(){
//console.log ("asd");
$('.rate_icon').addClass('rotatecoin');
setTimeout(function () {
$('.rate_icon').removeClass('rotatecoin');
}, 3000);
}
setInterval(rotatecoin,7000);
});
// Вызов попапа из моб меню
$ ('.mob_nav .callback_trig').click(function() {
$('body').removeClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
});
// Кастомный select
$('.nice_select').niceSelect();
// Мобильное меню
$('.mob_nav .nav_wrap .item').click(function() {
var th = $(this);
if($(this).hasClass('tg') || $(this).hasClass('wa')) {
} else if($(this).hasClass('active')) {
$('body').removeClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
} else {
if($('.mob_nav .nav_wrap .item.active').length) {
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
$(th).addClass('active');
setTimeout(function() {
$('.mob_nav .content_wrap .item').eq(th.index()).slideDown();
}, 600);
} else {
$('body').addClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
$(th).addClass('active');
$('.mob_nav .content_wrap .item').eq(th.index()).slideDown();
}
}
});
$('img.closebtn').click(function(){
var element = $('.nav_wrap .active');
if(element.hasClass('active')) {
$('body').removeClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
} else {
if($('.mob_nav .nav_wrap .item.active').length) {
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
$(th).addClass('active');
setTimeout(function() {
$('.mob_nav .content_wrap .item').eq(th.index()).slideDown();
}, 600);
} else {
$('body').addClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
$(th).addClass('active');
$('.mob_nav .content_wrap .item').eq(th.index()).slideDown();
}
}
});
$(document).mouseup(function (e){
var div = $('.mob_nav');
if (!div.is(e.target) && div.has(e.target).length === 0) {
$('body').removeClass('over_h');
$('.mob_nav .content_wrap .item').slideUp();
$('.mob_nav .nav_wrap .item').removeClass('active');
}
});
На этом все.