Сообщение #7 Dysha-Kuzbass » 20.06.2021, 02:48
Можно сделать красиво! К примеру, вот так!
*.code
- Спойлер
- <div id="footer-map" >
<div class="container">
<div class="map-content ">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A718e3aee83e7852c1bc5aa7920a24f3aaea0e0e29b5e0ac971cbfb2d06419e72&width=600&height=450&lang=ru_RU&scroll=true"></script>
<div class="btn-group close-map">
<button type="button" class="btn btn-danger" onclick="toogleMap()"><i class="fa fa-times"></i> Закрыть</button>
</div>
<div class="glass"></div>
</div>
<div class="map-toogle" data-toggle="tooltip" data-trigger="hover" title="Развернуть схему проезда">
<a id="mapToogle" onclick="toogleMap();">
<span class="fa fa-map-marker" aria-hidden="true" style="padding:10px;"></span>
</a>
</div>
</div>
</div>
<script>
function toogleMap() {
if ($('body').hasClass('map-open')) {
$('body').removeClass('map-open');
$('#footer-map .map-content').height(100);
} else {
$('body').addClass('map-open');
$('#footer-map .map-content').height($(window).innerHeight() + 15);
$('html, body').animate({ scrollTop: $('#footer-map').offset().top}, 250);
}
}
</script>
*.css
- Спойлер
- /*Карта в футуре*/
#footer-map {
background: #fff /* url('../images/bg.png') 50% 50px no-repeat */;
background-attachment: fixed;
position: relative;
}
#footer-map .close-map{
position: absolute;
top: 47px;
right: 10px;
display: none;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
#footer-map .close-map button{
}
#footer-map .close-map .btn-contacts{
width: 200px;
}
#footer-map .map-toogle{
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -22px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid #bbb;
padding: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#footer-map .map-toogle:before{
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
z-index:3;
}
#footer-map .map-toogle a{
font-size: 14px;
z-index: 4;
position: relative;
display: block;
border-radius: 50%;
height: 100%;
width: 100%;
background: #d9534f;
color: #fff;
font-size: 14px;
opacity: 1;
line-height: 36px;
text-align: center;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
cursor: pointer;
}
#footer-map .glass,
#footer-map .glass:before,
#footer-map .glass:after{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#footer-map .glass:before{
content: "";
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}
#footer-map .glass:after{
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
#footer-map .map-content{
position: relative;
height: 80px;
overflow: hidden;
opacity: 1;
}
#footer-map .map-content > ymaps{
width: auto!important;
height: 100%!important;
}
#footer-map .ymaps-2-1-29-copyrights-pane{
display: none;
}
#footer-map .ymaps-2-1-29-controls-pane{
opacity: 0;
}
.map-open{
overflow: hidden;
}
.map-open #footer-map .container{
width: 100%;
padding: 0;
}
.map-open #footer-map .close-map{
display: block;
}
.map-open #footer-map .glass{
visibility: hidden;
}
.map-open #footer-map .ymaps-2-1-29-controls-pane{
opacity: 1;
}
#footer-map + .container > .footer-box{
margin-top: 0;
}
Можно сделать красиво! К примеру, вот так!
*.code
[spoiler]<div id="footer-map" >
<div class="container">
<div class="map-content ">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A718e3aee83e7852c1bc5aa7920a24f3aaea0e0e29b5e0ac971cbfb2d06419e72&width=600&height=450&lang=ru_RU&scroll=true"></script>
<div class="btn-group close-map">
<button type="button" class="btn btn-danger" onclick="toogleMap()"><i class="fa fa-times"></i> Закрыть</button>
</div>
<div class="glass"></div>
</div>
<div class="map-toogle" data-toggle="tooltip" data-trigger="hover" title="Развернуть схему проезда">
<a id="mapToogle" onclick="toogleMap();">
<span class="fa fa-map-marker" aria-hidden="true" style="padding:10px;"></span>
</a>
</div>
</div>
</div>
<script>
function toogleMap() {
if ($('body').hasClass('map-open')) {
$('body').removeClass('map-open');
$('#footer-map .map-content').height(100);
} else {
$('body').addClass('map-open');
$('#footer-map .map-content').height($(window).innerHeight() + 15);
$('html, body').animate({ scrollTop: $('#footer-map').offset().top}, 250);
}
}
</script>[/spoiler]
*.css
[spoiler]/*Карта в футуре*/
#footer-map {
background: #fff /* url('../images/bg.png') 50% 50px no-repeat */;
background-attachment: fixed;
position: relative;
}
#footer-map .close-map{
position: absolute;
top: 47px;
right: 10px;
display: none;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
#footer-map .close-map button{
}
#footer-map .close-map .btn-contacts{
width: 200px;
}
#footer-map .map-toogle{
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -22px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid #bbb;
padding: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
#footer-map .map-toogle:before{
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
z-index:3;
}
#footer-map .map-toogle a{
font-size: 14px;
z-index: 4;
position: relative;
display: block;
border-radius: 50%;
height: 100%;
width: 100%;
background: #d9534f;
color: #fff;
font-size: 14px;
opacity: 1;
line-height: 36px;
text-align: center;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
cursor: pointer;
}
#footer-map .glass,
#footer-map .glass:before,
#footer-map .glass:after{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#footer-map .glass:before{
content: "";
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}
#footer-map .glass:after{
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
#footer-map .map-content{
position: relative;
height: 80px;
overflow: hidden;
opacity: 1;
}
#footer-map .map-content > ymaps{
width: auto!important;
height: 100%!important;
}
#footer-map .ymaps-2-1-29-copyrights-pane{
display: none;
}
#footer-map .ymaps-2-1-29-controls-pane{
opacity: 0;
}
.map-open{
overflow: hidden;
}
.map-open #footer-map .container{
width: 100%;
padding: 0;
}
.map-open #footer-map .close-map{
display: block;
}
.map-open #footer-map .glass{
visibility: hidden;
}
.map-open #footer-map .ymaps-2-1-29-controls-pane{
opacity: 1;
}
#footer-map + .container > .footer-box{
margin-top: 0;
}[/spoiler]