Мобильное меню в виде панели снизу

Пример мобильного меню выполненного в виде панели снизу. Красивые эффекты появления, скроллинга, расположение абсолютно любых элементов и любой информации, красивые вращающиеся иконки.

Размещаем в 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&amp;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');
    }
});

На этом все. 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены