function extendMagnificIframe() {
var $start = 0;
var $iframe = {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allow="fullscreen; picture-in-picture; encrypted-media;"> </iframe>'+
'</div>',
patterns: {
youtube: {
index: 'youtu',
id: function (url) {
var m = url.match(/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/);
if (!m || !m[1]) return null;
if (url.indexOf('t=') != - 1) {
var $split = url.split('t=');
var hms = $split[1].replace('h', ':').replace('m', ':').replace('s', '');
var a = hms.split(':');
if (a.length == 1) {
$start = a[0];
} else if (a.length == 2) {
$start = (+a[0]) * 60 + (+a[1]);
} else if (a.length == 3) {
$start = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
}
}
var suffix = '?autoplay=1';
if ($start > 0) {
suffix = '?start=' + $start + '&autoplay=1';
}
return m[1] + suffix;
},
src: '//www.youtube.com/embed/%id%'
},
vimeo: {
index: 'vimeo.com/',
id: function (url) {
var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
if (!m || !m[5]) return null;
return m[5];
},
src: '//player.vimeo.com/video/%id%?autoplay=1&volume=10'
},
vk: {
index: 'vk.com/',
id: function (url) { return url; },
src: '%id%&autoplay=1&volum=2'
},
facebook: {
index: 'facebook.com/',
id: function (url) { return url; },
src: '//www.facebook.com/plugins/video.php?href=%id%&show_text=0&autoplay=1'
},
dailymotion: {
index: 'dailymotion.com/',
id: function (url) {
var m = url.match(/video\/([^"]*)/);
if (!m || !m[1]) return null;
return m[1];
},
src: '//www.dailymotion.com/embed/video/%id%?autoPlay=1'
},
kinescope: {
index: 'kinescope.io/',
id: function (url) {
var m = url.match(/io\/([^"]*)/);
if (!m || !m[1]) return null;
return m[1];
},
src: 'https://kinescope.io/embed/%id%?autoplay=1',
allow: 'autoplay'
}
}
};
return $iframe;
}
$('.item-video').magnificPopup({
delegate: 'a',
type: 'iframe',
iframe: extendMagnificIframe()
});
.Button_button__NTtqi{
opacity: 1;
background: linear-gradient(94.35deg,#7d13e8 12.03%,#d91bea 93.27%);transition: .5s;
}
.Button_button__NTtqi:before {
content: ''
opacity: 1;
background: linear-gradient(94.35deg,#7d13e8 12.03%,#d91bea 93.27%);transition: .5s;
}
$(document).ready(function () {
function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
$(document).on('keyup', 'input[type=email]', function(){
const value = $(this).val();
if(!validateEmail(value)){
//некорректный email, показать крестик
}else{
//некорректный email, показать галочку
}
})
});
body{
overflow-x: hidden;
}
// плавный скролл
var $page = $('html, body');
$('a[href*="#"]').click(function() {
$page.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 400);
return false;
});
<ul id="menu1">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
<a href="#menu1" >button</a>
при клике переходим к пункту меню который нужно раскрыть, и добовляем ему некий класс
для этого класса добавляем такие же свойства как и для класса с :hover
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 300) $(".top_nav").removeClass('fixed');
else $(".top_nav").addClass('fixed');
});
.fixed{
position: fixed;
//дополнительные стили
}