Как сделать задержку срабатывания наведения :hover?
Есть меню, но при наведение на пункт надо сделать задержку срабатывания наведения Как сделать задержку срабатывания стиля ? Лучше через css? или лучше через java?
<?php
/**
* @package Joomla.Site
* @subpackage mod_menu
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<ul class="<?php echo $class_sfx; ?>">
<?php
$level_1 = []; $level_2 = []; $level_3 = []; $level_4 = [];
$mobmenu = [
'level_1' => [],
'level_2' => [],
'level_3' => [],
'level_4' => [],
'level_5' => [],
];
foreach ($list as $i => &$item)
{
if ($item->menutype === 'glavmenu2021') {
if ($item->level == 1) array_push($level_1, $item);
if ($item->level == 2) array_push($level_2, $item);
if ($item->level == 3) array_push($level_3, $item);
if ($item->level == 4) array_push($level_4, $item);
continue;
}
if ($item->menutype === 'mobile2021') {
if ($item->level == 1) array_push($mobmenu['level_1'], $item);
if ($item->level == 2) array_push($mobmenu['level_2'], $item);
if ($item->level == 3) array_push($mobmenu['level_3'], $item);
if ($item->level == 4) array_push($mobmenu['level_4'], $item);
if ($item->level == 5) array_push($mobmenu['level_5'], $item);
continue;
}
$class = 'item-' . $item->id;
if ($item->id == $default_id)
{
$class .= ' default';
}
if ($item->id == $active_id || ($item->type === 'alias' && $item->params->get('aliasoptions') == $active_id))
{
$class .= ' current';
}
if (in_array($item->id, $path))
{
$class .= ' active';
}
elseif ($item->type === 'alias')
{
$aliasToId = $item->params->get('aliasoptions');
if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}
elseif (in_array($aliasToId, $path))
{
$class .= ' alias-parent-active';
}
}
if ($item->type === 'separator')
{
$class .= ' divider';
}
if ($item->deeper)
{
$class .= ' deeper';
}
if ($item->parent)
{
$class .= ' parent';
}
echo '<li class="' . $class . '">';
switch ($item->type) :
case 'separator':
case 'component':
case 'heading':
case 'url':
require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper)
{
echo '<ul>';
}
// The next item is shallower.
elseif ($item->shallower)
{
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else
{
echo '</li>';
}
}
?></ul>
<?php if ($item->menutype === 'mobile2021'): ?>
<?php
// print_r($mobmenu['level_1'][3]);
echo '<ul class="mobmenu mobmenu_app">';
foreach ($mobmenu['level_1'] as $key_l1 => $l1):
$css = $l1->type !== 'url' ? 'mobmenu__opener' : '';
echo '<li>
<div class="mobmenu__title '.$l1->params['menu-anchor_css'].'">
<a href="'.$l1->link.'" class="mobmenu__title-left '.$css.'">
<div class="mobmenu__title-img"><img src="'.$l1->params['menu_image'].'" alt=""></div>
<div class="mobmenu__title-txt">'.$l1->title.'</div>
</a>
<div class="mobmenu__title-right mobmenu__opener">
<div class="mobmenu__arrow arrow-bottom"></div>
</div>
</div>';
$l2_first = 0;
foreach ($mobmenu['level_2'] as $key_l2 => $l2):
$css = $l2->type !== 'url' ? 'mobmenu__opener' : '';
if ($l2->parent_id == $l1->id) {
if ($l2_first === 0 ) echo '<ul class="mobmenu__submenu">';
echo '<li>
<div class="mobmenu__title '.$l2->params['menu-anchor_css'].'">
<a href="'.$l2->link.'" class="mobmenu__title-left '.$css.'">
<div class="mobmenu__title-img"><img src="'.$l2->params['menu_image'].'" alt=""></div>
<div class="mobmenu__title-txt">'.$l2->title.'</div>
</a>
<div class="mobmenu__title-right mobmenu__opener">
<div class="mobmenu__arrow arrow-bottom"></div>
</div>
</div>';
$l3_first = 0;
foreach ($mobmenu['level_3'] as $key_l3 => $l3):
$css = $l3->type !== 'url' ? 'mobmenu__opener' : '';
if ($l3->parent_id == $l2->id) {
if ($l3_first === 0 ) echo '<ul class="mobmenu__submenu">';
echo '<li>
<div class="mobmenu__title '.$l3->params['menu-anchor_css'].'">
<a href="'.$l3->link.'" class="mobmenu__title-left '.$css.'">
<div class="mobmenu__title-img"><img src="'.$l3->params['menu_image'].'" alt=""></div>
<div class="mobmenu__title-txt">'.$l3->title.'</div>
</a>
<div class="mobmenu__title-right mobmenu__opener">
<div class="mobmenu__arrow arrow-bottom"></div>
</div>
</div>';
$l4_first = 0;
foreach ($mobmenu['level_4'] as $key_l4 => $l4):
$css = $l4->type !== 'url' ? 'mobmenu__opener' : '';
if ($l4->parent_id == $l3->id) {
if ($l4_first === 0 ) echo '<ul class="mobmenu__submenu">';
echo '<li>
<div class="mobmenu__title '.$l4->params['menu-anchor_css'].'">
<a href="'.$l4->link.'" class="mobmenu__title-left '.$css.'">
<div class="mobmenu__title-img"><img src="'.$l4->params['menu_image'].'" alt=""></div>
<div class="mobmenu__title-txt">'.$l4->title.'</div>
</a>
<div class="mobmenu__title-right mobmenu__opener">
<div class="mobmenu__arrow arrow-bottom"></div>
</div>
</div>';
$l5_first = 0;
foreach ($mobmenu['level_5'] as $key_l5 => $l5):
$css = $l5->type !== 'url' ? 'mobmenu__opener' : '';
if ($l5->parent_id == $l4->id) {
if ($l5_first === 0 ) echo '<ul class="mobmenu__submenu">';
echo '<li>
<div class="mobmenu__title '.$l5->params['menu-anchor_css'].'">
<a href="'.$l5->link.'" class="mobmenu__title-left '.$css.'">
<div class="mobmenu__title-img"><img src="'.$l5->params['menu_image'].'" alt=""></div>
<div class="mobmenu__title-txt">'.$l5->title.'</div>
</a>
<div class="mobmenu__title-right mobmenu__opener">
<div class="mobmenu__arrow arrow-bottom"></div>
</div>
</div>
</li>';
$l5_first++;
}
endforeach;
if ($l5_first !== 0 ) echo '</ul>';
echo '</li>';
$l4_first++;
}
endforeach;
if ($l4_first !== 0 ) echo '</ul>';
echo '</li>';
$l3_first++;
}
endforeach;
if ($l3_first !== 0 ) echo '</ul>';
echo '</li>';
$l2_first++;
}
endforeach;
if ($l2_first !== 0 ) echo '</ul>';
echo '</li>';
endforeach;
echo '</ul>';
echo "<style>
.mobmenu{padding:0;margin:0;font-weight:700;text-transform:uppercase}.mobmenu *{box-shadow:none!important}.mobmenu li{list-style:none;cursor:pointer}.mobmenu__parent.open>.mobmenu__submenu{max-height:2000px;transition:max-height .35s ease-in}.mobmenu__parent.open>.mobmenu__title{background:#f0f0f0}.mobmenu__parent.open>.mobmenu__title>.mobmenu__title-right{visibility:visible}.mobmenu__parent.open>.mobmenu__title>.mobmenu__title-right>.mobmenu__arrow{transform:rotate(225deg)}.mobmenu__parent>.mobmenu__title>.mobmenu__title-right{visibility:visible}.mobmenu__submenu{transition:max-height .15s ease-out;max-height:0;overflow:hidden;margin-top:10px;padding:0;margin:0;padding-left:0!important;display:block!important}.mobmenu__title{display:flex;align-items:center;justify-content:space-between;padding:8px 15px;position:relative}.mobmenu__title.yellow{background:#ffdb4e!important}.mobmenu__title-left{display:flex;flex:1;color:#000;min-height:0!important}.mobmenu__title-right{width:50px;height:25px;display:flex;align-items:center;justify-content:center;visibility:hidden}.mobmenu__title-txt{padding:0 10px;line-height:25px}.mobmenu__title-img{max-width:25px;max-height:25px}.mobmenu__title-img img{width:100%}.mobmenu__arrow{transform:rotate(45deg);transition:all .3s}.mobmenu_app .mobmenu__arrow{transform:rotate(315deg)}.mobmenu_app .mobmenu__submenu{transition:none}.mobmenu_app .mobmenu__parent.open{position:absolute!important;top:0;left:0;right:0;bottom:0;background:#fff;z-index:100;padding-top:45px}.mobmenu_app .mobmenu__parent.open>.mobmenu__title{flex-direction:row-reverse}.mobmenu_app .mobmenu__parent.open>.mobmenu__title>.mobmenu__title-right>.mobmenu__arrow{transform:rotate(135deg)}.arrow-bottom{border-bottom:2px solid #0b458f;border-right:2px solid #0b458f;width:8px;height:8px}
</style>
<script>
window.addEventListener('DOMContentLoaded', function () {
(function() {
const mobmenu = document.querySelector('.mobmenu')
const liList = mobmenu.querySelectorAll('li')
const subList = mobmenu.querySelectorAll('.mobmenu__submenu')
liList.forEach((el) => {
if (el.querySelector('.mobmenu__submenu')) {
el.classList.add('mobmenu__parent')
el.querySelector('.mobmenu__title').classList.add('mobmenu__title_parent')
}
})
mobmenu.addEventListener('click', (e) => {
if (!e.target.closest('.mobmenu__opener')) return;
e.preventDefault()
const eParent = e.target.closest('.mobmenu__parent')
const subMenu = eParent.querySelector('.mobmenu__submenu')
eParent.classList.toggle('open')
closeOther(e.target)
})
function closeOther(target) {
const targetOpen = target.closest('.mobmenu__parent')
mobmenu.querySelectorAll('.mobmenu__parent').forEach((el) => {
const parent = [...el.querySelectorAll('.mobmenu__parent')]
if (!parent.includes(targetOpen) && targetOpen !== el) {
el.classList.remove('open')
}
})
}
}());
})
</script>";
?>
<?php endif; ?>
<?php if ($item->menutype === 'glavmenu2021'): ?>
<div style="background: #218cc6; width: 100%;">
<div class="wrapper clr">
<div class="mymenu">
<?php
// $level_1 = []; $level_2 = []; $level_3 = []; $level_4 = [];
// foreach ($list as $i => &$item) {
// if ($item->menutype === 'glavmenu2021') {
// if ($item->level == 1) array_push($level_1, $item);
// if ($item->level == 2) array_push($level_2, $item);
// if ($item->level == 3) array_push($level_3, $item);
// if ($item->level == 4) array_push($level_4, $item);
// }
// }
foreach ($level_1 as $key => $l1) {
echo '<div class="mymenu__item">';
$l1_id = $l1->id;
echo '<a href="'.$l1->link.'" class="mymenu__item-link">'.$l1->title.'</a>';
echo '<div class="mymenu__item-body"> <div class="mymenu__submenu">';
$l2_ids = [];
$active = 'active';
foreach ($level_2 as $l2) {
if ($l2->parent_id == $l1_id) {
echo '<a href="'.$l2->link.'" class="mymenu__submenu-link tabs '. $active .'" data-target="'.$l2->id.'">'.$l2->title.'</a>';
$l2_ids['id'][] = $l2->id;
$l2_ids['css_type'][] = $l2->params['menu-anchor_css'];
$active = '';
}
}
echo '</div>';
$active = 'active';
foreach ($l2_ids['id'] as $key_l2 => $l2_id) {
echo '<div class="mymenu__content mymenu__content_'.$l2_ids['css_type'][$key_l2].' '. $active .'" id="'.$l2_id.'">';
$active = '';
$level_3_filtred = [];
foreach ($level_3 as $item) {
if ($item->parent_id === $l2_id) {
array_push($level_3_filtred, $item);
}
}
$count_in_column = $l2_ids['css_type'][$key_l2] === 'column' ? ceil(count($level_3_filtred) / 5) : 1;
// echo '<pre>';
// print_r($count_in_column);
// echo '</pre>';
for ($q = 0; $q < 5; $q++) {
$l3_arr = [];
for ($c = 0; $c < $count_in_column; $c++) {
$indx = $q + ($c * 5);
array_push($l3_arr, $level_3_filtred[$indx]);
}
echo '<div class="content">';
foreach ($l3_arr as $key_l3 => $l3) {
if (!$l3) break;
echo $key_l3 > 0 ? '<br>' : false;
if ($l3->type === 'url') {
if ($l3->params['menu_image']) {
echo '<a href="'.$l3->link.'"><img src="/'.$l3->params['menu_image'].'" alt=""></a>';
} else {
echo '<div class="content__h"><a href="'.$l3->link.'">'.$l3->title.'</a></div>';
}
} else {
echo '<div class="content__h">'.$l3->title.'</div>';
}
$l3_id = $l3->id;
$i = 0;
foreach ($level_4 as $l4) {
if ($l4->parent_id == $l3_id) {
if ($i % 11 === 0 && $i !== 0 && $l2_ids['css_type'][$key_l2] === 'column') {
echo '</div><div class="content"><div class="content__h"> </div>';
}
$i++;
if ($l4->type === 'url') {
echo '<a href="'.$l4->link.'" class="content__a '.$l4->params['menu-anchor_css'].'">'.$l4->title.'</a>';
} else {
echo '<div class="content__h" style="margin-top:15px">'.$l4->title.'</div>';
}
}
}
}
echo '</div>';
}
echo '</div>';
}
echo '</div> </div>';
// echo '<pre>';
// print_r($l4->type);
// echo '</pre>';
if (count($level_1) === $key + 1) {
echo '
<style>
.mymenu{
background:#218cc6;
display:flex;
position:relative;
}
.mymenu__item-body{
display:none;
background:#fff;
position:absolute;
top:100%;
left:-10px;
right:0;
padding:15px 0;
z-index:1000
}
.mymenu__item-link{
cursor:pointer;
padding:7px 10px;
display:block;
color:#fff
}
.mymenu__item-link:hover{
text-decoration:none;
color:#fff
}
.mymenu__item:not(:last-of-type){
margin-right:15px
}
.mymenu__item:hover{
background:#1e80b4
}
.mymenu__item-body{
display:none;
}
.mymenu__item:hover .mymenu__item-body{
display:flex;
}
.mymenu__submenu{
margin-right:30px;
display:flex;
flex-direction:column
}
.mymenu__submenu-link{
font-weight:bold;
cursor:pointer;
padding:10px 20px;
background:#f2f3f5;
border-right:#f2f3f5 solid 2px;
color: #0b458fcf;
min-width:230px;
border-radius:0 10px 0 0
}
.mymenu__submenu-link:not(:last-of-type){
margin-bottom:10px
}
.mymenu__submenu-link:hover{
color:#218cc6!important;
text-decoration:none
}
.mymenu__submenu-link.active,.mymenu__submenu-link:hover{
border-right:#218cc6 solid 2px
}
.mymenu__content{
display:none
}
.mymenu__content a:hover{
color:#218cc6!important
}
.mymenu__content.active{
display:flex
}
.mymenu__content .content:not(:last-of-type){
margin-right:30px
}
.mymenu__content .content__h{
font-weight:700;
margin-bottom:10px
}
.mymenu__content .content__a{
color:#808d9a;
margin-bottom:10px
}
.mymenu__content .content__a{
display:inline-block
}
.mymenu__content .content__a.red{
color:red
}
.mymenu__content .content__a.blue{
color:#4169e1
}.mymenu__content .content__h a{color:#274897;text-decoration:underline}.mymenu__content .row{margin-bottom:20px}.mymenu__content .row__h{font-weight:700;margin-bottom:10px}.mymenu__content .row .content__a{margin-right:10px}.mymenu__content_img{flex-wrap:wrap}.mymenu__content_img .content{max-width:calc(100% / 4 - 15px);margin-right:15px!important;margin-bottom:15px}.mymenu__content_img img{width:100%}.mymenu__content_column{flex-wrap:wrap;width:100%}.mymenu__content_column .content{display:flex;flex-direction:column;margin-bottom:25px;width:calc(20% - 30px)}.mymenu__content_row{flex-direction:column}.mymenu__content_row .content{margin-bottom:20px}.mymenu__content_row .content__a{margin-right:10px}
</style>';
echo " <script>
window.addEventListener('DOMContentLoaded', function () {
console.log('ok')
const mymenu = document.querySelector('.mymenu')
$('.mymenu').on('mouseover', (e) => {
if (e.target.classList.contains('tabs')) {
const id = e.target.getAttribute('data-target')
const mymenu__item = e.target.closest('.mymenu__item')
const mymenu__content = $(mymenu__item).find('.mymenu__content')
const mymenu__submenuLink = $(mymenu__item).find('.mymenu__submenu-link')
mymenu__submenuLink.each(function (i) {
const el = $( this )[0]
if (el === e.target) {
el.classList.add('active')
} else {
el.classList.remove('active')
}
})
mymenu__content.each(function () {
const el = $( this )[0]
if (el.getAttribute('id') === id) {
el.classList.add('active')
} else {
el.classList.remove('active')
}
})
}
})
});
</script>";
}
}
?>
</div>
</div>
</div>
<?php endif; ?>
Ответы (1 шт):
Автор решения: Zoodogood
→ Ссылка
element:hover {
animation-name: your-name;
animation-delay: 1000ms;
animation-fill-mode: forwards;
}
@keyframes your-name {
100% {
/* Ваши стили */
background: #1e80b4;
}
}