Цитата:
Заранее спасибо за потраченное время |
свертывание выпадающего меню с задержкой
tantan812,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#nav_menu_content * {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#nav_menu_content{
background:#fff url(http://s2.uploads.ru/dNObX.png) repeat-y -76px 0;
/*border:red solid 1px;*/
list-style: none;
padding-left: 12px;
display:inline:block;
width:134px;
}
#nav_menu_content ul {
background-color:#3D81F3;
list-style-position: outside;
text-align:left;
position: absolute;
margin-left:100px;
margin-top:-20px;
padding: 0 3px 0 0;
list-style: none;
display: none;
}
#nav_menu_content li {
border-bottom:#fff solid 1px;
list-style: none;
margin:4px auto 4px 4px;
padding:2px 4px;
}
#nav_menu_content ul>li {
border:red solid 1px;
list-style: none;
margin:4px auto 4px 4px;
padding:2px 4px;
}
#nav_menu_content > li:hover {
background-color:#fff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("#nav_menu_content li").mouseenter(function() {
var a = $(this).find("ul:first").stop();
$(this).siblings().find("ul").stop().fadeOut(300);
a.fadeIn(700);
}).mouseleave(function() {
$(this).find("ul").stop().delay(900).fadeOut(700);
});
});
</script>
</head>
<body>
<ul id='nav_menu_content'>
<li><a href='#0'>Категория 1</a>
<ul>
<li><a href="#">Субкатегория 1<ul>
<li><a href="#">Субкатегория 1</a>
</li>
<li><a href="#">Субкатегория 2</a>
</li>
<li><a href="#">Субкатегория 3</a>
</li>
</ul></a>
</li>
<li><a href="#">Субкатегория 2</a>
</li>
<li><a href="#">Субкатегория 3</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 2</a>
<ul>
<li><a href="#">Субкатегория 4</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 3</a>
<ul>
<li><a href="#">Субкатегория 5</a>
</li>
<li><a href="#">Субкатегория 6</a>
</li>
</ul>
</li>
<li><a href='#0'>Категория 4</a>
<ul>
<li><a href="#">Субкатегория 7</a>
</li>
<li><a href="#">Субкатегория 8</a>
</li>
<li><a href="#">Субкатегория 9</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:19. |