Добрый вечер!Подскажите пожалуйста,как реализовать вот такую задачу.
При клике по пункту меню,открывается подменю,если пользователь увел мышку с этого подменю,то через 2 секунды оно закрывается,и тоже самое,если кликнуть в любую область экрана.
Сейчас сделано,что открывается по клику и скрывается тоже по клику
<ul class = "menu-ul">
<li class = "li">
<div class="one-block-li">
<a href="#main">
<div class = "logo"></div>
</a>
</div>
</li>
<li class = "li">
<div class="two-block-li" id = "two-block-li">
<a href="#news" class = "href-drop-two">
<div class = "logo-articles"></div>
<p class = "articles-title">статьи / новости</p>
<p class = "articles-text">Популярные статьи и свежие новости</p>
</a>
<div class = "delemiter-line"></div>
<ul class = "dropdown-child">
<li class = "border-div current">
<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
</ul>
</div>
</li>
<li class = "li">
<div class = "three-block-li">
<a href="#files" class = "href-drop-three">
<div class = "logo-articles logo-articles-two"></div>
<p class = "articles-title articles-title-two">файлы / моды</p>
<p class = "articles-text articles-text-two">Популярные статьи и свежие</p>
</a>
<div class = "delemiter-line delemiter-line-two"></div>
<ul class = "dropdown-child">
<li class = "border-div current">
<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
</ul>
</div>
</li>
<li class = "li">
<div class = "four-block-li">
<a href="#milteeplayers" class = "href-drop-four">
<div class = "logo-articles logo-articles-three"></div>
<p class = "articles-title articles-title-three ">мультиплееры</p>
<p class = "articles-text articles-text-three">Популярные статьи и свежие</p>
</a>
<div class = "delemiter-line delemiter-line-three"></div>
<ul class = "dropdown-child">
<li class = "border-div current">
<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
</ul>
</div>
</li>
<li class = "li">
<div class = "five-block-li">
<a href="#" class = "href-drop-five">
<div class = "logo-articles logo-articles-four"></div>
<p class = "articles-title articles-title-four">дополнительно</p>
<p class = "articles-text articles-text-four">Популярные статьи и свежие</p>
</a>
<ul class = "dropdown-child">
<li class = "border-div current">
<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
</li>
<li class = "border-div">
<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
</li>
</ul>
</div>
</li>
</ul>
$(function() {
var timer;
$('.href-drop-two').on('click', function() {
menu('.href-drop-two');
$('.two-block-li>.dropdown-child').fadeToggle(800)
});
$('.href-drop-three').on('click', function() {
var r = menu('.href-drop-three');
$('.three-block-li>.dropdown-child').fadeToggle(800, function() {
hoverLogo(r);
});
});
$('.href-drop-four').on('click', function() {
var r = menu('.href-drop-four');
$('.four-block-li>.dropdown-child').fadeToggle(800, function() {
hoverLogo(r);
});
});
$('.href-drop-five').on('click', function() {
menu('.href-drop-five');
$('.five-block-li>.dropdown-child').fadeToggle(800);
});
});
function menu(e) {
var count = 0;
switch (e) {
case '.href-drop-two':
$('.logos-href').css('display', 'block');
$('.three-block-li>.dropdown-child').fadeOut(800);
$('.four-block-li>.dropdown-child').fadeOut(800);
$('.five-block-li>.dropdown-child').fadeOut(800);
break;
case '.href-drop-three':
$('.two-block-li>.dropdown-child').fadeOut(800);
$('.four-block-li>.dropdown-child').fadeOut(800, function() {
count = 1;
});
$('.five-block-li>.dropdown-child').fadeOut(800);
break;
case '.href-drop-four':
$('.two-block-li>.dropdown-child').fadeOut(800);
$('.three-block-li>.dropdown-child').fadeOut(800, function() {
count = 1;
});
$('.five-block-li>.dropdown-child').fadeOut(800);
break;
case '.href-drop-five':
$('.logos-href').css('display', 'block');
$('.two-block-li>.dropdown-child').fadeOut(800);
$('.four-block-li>.dropdown-child').fadeOut(800, function() {
count = 1;
});
$('.three-block-li>.dropdown-child').fadeOut(800, function() {
count = 1;
});
break;
}
return count;
}
function hoverLogo(e) {
var display = $('.logos-href').css('display');
if(e == 1) {
if(display == 'none') $('.logos-href').css('display', 'block');
else $('.logos-href').css('display', 'none');
}
}
