Определять выход дочернего элемента за границы родителя? js (jquery)
104
10 марта 2022, 05:40
делаю многоуровневое меню (три уровня), столкнулся с проблемой, что у крайних пунктов, меню вторых третьих уровней выходят за зону видимости (и собственно за свой первоначальный родитель).
Можно это исправить тем же css, разными методами, но я подумал, если в дальнейшем например начать изменять контент в меню, это может вылезти боком.
Интересуюсь как отслеживать когда какой либо ul с классом .sub-menu будет выходить за края (по ширине) родителя меню, и уже тогда динамически присваивать ему класс с нужными стилями которые будут разворачивать его в противоположную сторону.
Буду рад если поможете такое реализовать или подсказать.
(function($) {
var size;
//SMALLER HEADER WHEN SCROLL PAGE
function smallerMenu() {
var sc = $(window).scrollTop();
if (sc > 40) {
$('#header-sroll').addClass('small');
}else {
$('#header-sroll').removeClass('small');
}
}
// VERIFY WINDOW SIZE
function windowSize() {
size = $(document).width();
if (size >= 991) {
$('body').removeClass('open-menu');
$('.hamburger-menu .bar').removeClass('animate');
}
};
// ESC BUTTON ACTION
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('.bar').removeClass('animate');
$('body').removeClass('open-menu');
$('header .desk-menu .menu-container .menu .menu-item-has-children a ul').each(function( index ) {
$(this).removeClass('open-sub');
});
}
});
$('#cd-primary-nav > li').hover(function() {
$whidt_item = $(this).width();
$whidt_item = $whidt_item-8;
$prevEl = $(this).prev('li');
$preWidth = $(this).prev('li').width();
var pos = $(this).position();
pos = pos.left+4;
$('header .desk-menu .menu-container .menu>li.line').css({
width: $whidt_item,
left: pos,
opacity: 1
});
});
// ANIMATE HAMBURGER MENU
$('.hamburger-menu').on('click', function() {
$('.hamburger-menu .bar').toggleClass('animate');
if($('body').hasClass('open-menu')){
$('body').removeClass('open-menu');
}else{
$('body').toggleClass('open-menu');
}
});
$('header .desk-menu .menu-container .menu .menu-item-has-children ul').each(function(index) {
$(this).append('<li class="back"><a href="#">Voltar</a></li>');
});
// RESPONSIVE MENU NAVIGATION
$('header .desk-menu .menu-container .menu .menu-item-has-children > a').on('click', function(e) {
e.preventDefault();
if(size <= 991){
$(this).next('ul').addClass('open-sub');
}
});
// CLICK FUNCTION BACK MENU RESPONSIVE
$('header .desk-menu .menu-container .menu .menu-item-has-children ul .back').on('click', function(e) {
e.preventDefault();
$(this).parent('ul').removeClass('open-sub');
});
$('body .over-menu').on('click', function() {
$('body').removeClass('open-menu');
$('.bar').removeClass('animate');
});
$(document).ready(function(){
windowSize();
});
$(window).scroll(function(){
smallerMenu();
});
$(window).resize(function(){
windowSize();
});
})(jQuery);body { font-family: 'Ubuntu', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; color: #4e4e4e; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; left: 0; } body > .over-menu { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: fixed; height: 100%; content: ''; width: 100%; left: 0; top: 0; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.6); z-index: 9; } body.open-menu { left: -250px; } body.open-menu > .over-menu { visibility: visible; opacity: 1; } body.open-menu .menu-container { right: 0 !important; } a { text-decoration: none !important; outline: none; } .hidden { display: none; } section { position: relative; width: 100%; float: left; } header { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-color: transparent; width: 100%; float: left; position: fixed; z-index: 10; } header::before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: 0; background: #FFF; position: absolute; width: 100%; content: ''; top: 0; right: 0; height: 0; } header .desk-menu { position: relative; width: 100%; float: left; } header .desk-menu .logo { position: absolute; float: left; } header .desk-menu .logo-adn { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: 20px 0 0; position: relative; display: table; z-index: 1; } header .desk-menu .logo-adn a { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-image: url(""); background-position: 0; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; display: block; width: 40px; height: 40px; font-size: 0; } header .desk-menu .box-menu { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; padding: 16px 0 0; display: block; margin: 0 auto; float: right; text-align: center; } header .desk-menu .menu-container { float: left; } header .desk-menu .menu-container .menu-head, header .desk-menu .menu-container .menu-foot { width: 100%; float: left; display: none; } header .desk-menu .menu-container .menu-head { background: #4285f4; padding: 16px 10px; } header .desk-menu .menu-container .menu-head .e1 { padding: 3px 0; float: left; } header .desk-menu .menu-container .menu-head .e1 img { width: 29px; float: left; height: 29px; } header .desk-menu .menu-container .menu-head .client { color: #FFF; float: right; } header .desk-menu .menu-container .menu-head .client span { font-family: 'Ubuntu', sans-serif; text-transform: uppercase; padding: 5px 42px 5px 0; position: relative; line-height: 100%; font-size: 9px; display: block; } header .desk-menu .menu-container .menu-head .client i { position: absolute; font-size: 30px; right: 0; top: 0; } header .desk-menu .menu-container .menu-foot { position: absolute; bottom: 0; padding: 15px 0; } header .desk-menu .menu-container .menu-foot .social { display: table; margin: 0 auto; } header .desk-menu .menu-container .menu-foot .social a { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: inline-block; position: relative; margin: 0 5px 0 0; color: #FFF; font-size: 13px; text-align: center; padding: 5px 0; border-radius: 50%; background: #797c82; width: 29px; height: 29px; } header .desk-menu .menu-container .menu-foot .social a:last-child { margin: 0; } header .desk-menu .menu-container .menu-foot .social a:hover { background: #a4a7ac; } header .desk-menu .menu-container .menu-foot hr { margin: 15px auto 20px; display: table; width: calc(100% - 20px); } header .desk-menu .menu-container .menu-foot address { position: relative; text-align: left; padding: 0 15px; margin: 0; } header .desk-menu .menu-container .menu-foot address i { position: absolute; left: 0; top: 0; } header .desk-menu .menu-container .menu-foot address span { padding: 0 0 0 20px; position: relative; margin-bottom: 5px; font-size: 12px; display: block; } header .desk-menu .menu-container .menu { float: left; padding: 0; margin: 0 20px 0 0; list-style: none; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } header .desk-menu .menu-container .menu li.back { display: none; } header .desk-menu .menu-container .menu > li { -webkit-transition: all 0.33s ease; -moz-transition: all 0.33s ease; -ms-transition: all 0.33s ease; -o-transition: all 0.33s ease; transition: all 0.33s ease; margin: 0 0 0 10px; float: left; cursor: pointer; position: relative; overflow: inherit; } header .desk-menu .menu-container .menu > li a { position: relative; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; font-size: 13.9px; padding: 19px 8px; display: block; color: #4e4e4e; } header .desk-menu .menu-container .menu > li.menu-item-has-children > a { padding: 19px 20px 19px 8px; position: relative; } header .desk-menu .menu-container .menu > li.menu-item-has-children > a::before, header .desk-menu .menu-container .menu > li.menu-item-has-children > a::after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #4e4e4e; position: absolute; content: ''; height: 1px; width: 7px; top: 26px; } header .desk-menu .menu-container .menu > li.menu-item-has-children > a::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); right: 10px; } header .desk-menu .menu-container .menu > li.menu-item-has-children > a::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 6px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu { box-shadow: 1px 2px 4px rgba(46, 61, 73, 0.2); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; -webkit-overflow-scrolling: touch; min-width: 200px; position: absolute; list-style: none; background: #FFF; padding: 0; float: left; display: table; left: 0; width: 100%; float: left; display: none; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li { width: 100%; -webkit-transition: all 0.33s ease; -moz-transition: all 0.33s ease; -ms-transition: all 0.33s ease; -o-transition: all 0.33s ease; transition: all 0.33s ease; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li > a { color: #4e4e4e; padding: 12px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li .sub-menu, li.menu-item-has-children .sub-menu li .sub-menu > li.menu-item-has-children .sub-menu li .sub-menu { display: none; } /**/ .sub-menu li.menu-item-has-children .sub-menu li .sub-menu { display: none!important; } /**/ header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::before, header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::after { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #4e4e4e; position: absolute; content: ''; height: 1px; width: 7px; top: 24px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::before { transform: rotate(45deg); right: 6px; top: 19px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::after { transform: rotate(-45deg); right: 6px; top: 23px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover > a { display: block; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover .sub-menu { display: block; } /**/ header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover > a { display: block!important; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover .sub-menu { display: block!important; } /**/ header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a { color: #4285f4; background-color: #eeeff1; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a::before { -webkit-transform: rotate(142deg); -moz-transform: rotate(142deg); -ms-transform: rotate(142deg); -o-transform: rotate(142deg); transform: rotate(142deg); top: 23px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a::after { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); -ms-transform: rotate(42deg); -o-transform: rotate(42deg); transform: rotate(42deg); right: 11px; } header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu .sub-menu { left: 100%; margin-top: -43px; } /**/ @media (min-width: 991px) { header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu .sub-menu .offsetWidth{ left: -100%; margin-top: -43px; z-index: 9; } .last__sub-menu.offsetWidth, .sub-menu_to-right.offsetWidth{ right: 0!important; left: unset!important; } .last__sub-menu.offsetWidth .sub-menu, .sub-menu_to-right.offsetWidth .sub-menu { left: -100%!important; } } /**/ header .desk-menu .menu-container .menu > li.menu-item-has-children a { text-align: left; } header .desk-menu .menu-container .menu > li.menu-item-has-children a:hover { margin-top: 0; } header .desk-menu .menu-container .menu > li.line { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: absolute; bottom: 11px; left: 0; height: 0px; pointer-events: none; border: 1px solid #4285f4; background: #4285f4; -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1); -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22); transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22); opacity: 0; display: block; } header .desk-menu .menu-container .menu > li:hover > a { color: #4285f4; } header .desk-menu .menu-container .menu > li:hover > a::before { -webkit-transform: translateX(5px) rotate(-45deg); -moz-transform: translateX(5px) rotate(-45deg); -ms-transform: translateX(5px) rotate(-45deg); -o-transform: translateX(5px) rotate(-45deg); transform: translateX(5px) rotate(-45deg); width: 10px; right: 12px; } header .desk-menu .menu-container .menu > li:hover > a::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 10px; right: 7px; } header .desk-menu .menu-container .menu > li:hover.menu-item-has-children .sub-menu { display: block; } header .hamburger-menu { display: none; } header.small::before { box-shadow: 0px 5px 25px 0 rgba(46, 61, 73, 0.2); height: 100%; } header.small .desk-menu .menu-container .menu > li.menu-item-has-children > a::before, header.small .desk-menu .menu-container .menu > li.menu-item-has-children > a::after { background-color: #4e4e4e; } header.small .desk-menu .logo-adn { margin-top: 14px; } header.small .desk-menu .logo-adn a { background-image: url("../img/empresa-1-logo.svg"); height: 30px; width: 140px; } header.small .desk-menu .box-menu { padding: 0; } header.small .desk-menu .box-menu ul li a { color: #4e4e4e; } /*A plus icon*/ .plus-icon { height: 32px; width: 32px; position: relative; } .plus-icon::before, .plus-icon::after { content: " "; width: 32px; height: 6px; background-color: #000; display: block; position: absolute; top: 50%; left: 50%; transition: all 0.15s cubic-bezier(.42, 0, .58, 1); opacity: 1; border-radius: 2px; } .plus-icon::before { transform: translate(-50%, -50%) rotate(90deg); } .plus-icon::after { transform: translate(-50%, -50%); } .plus-icon.expanded::before { transform: translate(-50%, -50%) rotate(0deg); } .plus-icon.expanded::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="over-menu"></div>
<div id="wrap">
<header class="header" id="header-sroll">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="desk-menu">
<nav class="box-menu">
<div class="menu-container">
<div class="menu-header-container">
<ul id="cd-primary-nav" class="menu">
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="/">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="h#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Третий пункт</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item menu-item-has-children">
<a href="#">Второй уровень</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
<li class="menu-item menu-item-has-children">
<a href="#">Третий уровень</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Пункт третего уровня</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu sub-menu_to-right">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="contact menu-item ">
<a href="#">Lorem Ipsum</a>
</li>
<!-- a plus -->
<li class="menu-item menu-item-has-children">
<a href="#"><b>+</b></a> <!-- <i class="plus-icon"></i> -->
<ul class="sub-menu last__sub-menu">
<li class="menu-item menu-item-has-children">
<a href="#">Второй уровень</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
<li class="menu-item menu-item-has-children">
<a href="#">Третий уровень</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Пункт третего уровня</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Lorem Ipsum</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- end a plus -->
<li class="line"></li>
</ul>
</div>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
</div>
</body>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47551 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23624 visits
- Как через css изменить цвет png изображения? 10346 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9206 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 18.11.2024 | 08:25