JS menu помогите доработать меню

[karencho]

здравствуйте вот это сам скрипт меню :

<script> 
  $(function() { 
  var $menu = $('#dm_menu'); 
  $menu.children('li').each(function(){ 
  var $this = $(this); 
  var $span = $this.children('span');
  $span.data('width',$span.width()); 

  
  $this.bind('mouseenter',function(){ 
  $menu.find('.menu_div').stop(true,true).hide(); 
  $span.stop().animate({'width':'auto'},150,function(){ 
  $this.find('.menu_div').slideDown(150); 
  }); 
  }).bind('mouseleave',function(){ 
  $this.find('.menu_div').stop(true,true).hide(); 
  $span.stop().animate({'width':$span.data('width')+'px'},600); 
  }); 
  }); 
  }); 
  </script>

сам див :

<ul id="dm_menu" class="menu_top"> 
  <li> 
  <a href="#"><span class="mt_title1">Проверка-1</span></a> 
  </li> 
  
  <li> 
<span class="mt_title1 mt_mrg">Проверка-2</span>
  <div class="menu_div md2"> 
  <ul>
  <li><a href="/">Категория - 1.1</a></li> 
  <li><a href="#">Категория - 2.1</a></li> 
  <li><a href="#">Категория - 3.1</a></li> 
  <li><a href="#">Категория - 4.1</a></li> 
  <li><a href="#">Категория - 5.1</a></li> 
  </ul> 
  
  <ul>
  <li><a href="#">Категория - 1.1</a></li> 
  <li><a href="#">Категория - 2.1</a></li> 
  <li><a href="#">Категория - 3.1</a></li> 
  <li><a href="#">Категория - 4.1</a></li> 
  <li><a href="#">Категория - 5.1</a></li> 
  </ul> 
  
  <ul> 
  <li><a href="#">Категория - 1.1</a></li> 
  <li><a href="#">Категория - 2.1</a></li> 
  <li><a href="#">Категория - 3.1</a></li> 
  <li><a href="/">Категория - 4.1</a></li> 
  <li><a href="#">Категория - 5.1</a></li> 
  </ul> 
  </div> 
  </li> 
  
  <li> 
  <a href="" title="описание ссылки" target="_blank"><span class="mt_title1">Проверка-3</span>  </a> 
  </li> 
 
  </ul>

и ксс код :

.menu_top { 
  display:block; 
  list-style:none; 
  height:30px; 
font-weight:bold;
line-height:22px;
  margin:0; 
  padding:0; 
} 

.menu_top a { background:url(../images/style/header_menu.gif) no-repeat;height:25px;display:block;float:left;color:#FFF; margin-right:5px;}
.menu_top a:hover {background-position:0 -25px;color:#f22354;}
.menu_top a span {background:url(../images/style/header_menu.gif) no-repeat right top;margin-left:13px;padding-right:18px;height:25px;display:block;}
.menu_top a:hover span {background-position:right -25px ;color:#f22354;}

.menu_top .mt_mrg {background:url(../images/style/header_menu.gif) no-repeat right top;margin-left:13px;padding-right:18px;height:25px;display:block;}

.menu_top .mt_mrg:hover {color:#fff;}

.menu_top > li{ 
  float:left; 
  position:relative; 
} 

.menu_top ul { 
  list-style:none; 
  float:left; 
  margin:10px 0px 10px 20px; 
  padding:0px; 
} 

.menu_top ul li a{  
  color:#f22354; 
  line-height:20px; 
  padding:1px 10px 2px 10px;
  background:none;
} 

.menu_top ul li a:hover{ 
} 

.mt_title1, 
.mt_title2 { 
  color:#fff; 
  height:25px; 
  cursor: pointer; 
} 

.mt_title1{
} 

.mt_mrg {margin-right:5px;}

.mt_title2 { 
} 

.mt_title3{ 
  color:#fff;
  padding:5px 0px 5px 10px; 
} 

.menu_div{ 
  position:absolute; 
  display:none; 
  background:#fff; 
  border-bottom: 5px solid #000; 
  border-left: 5px solid #000;
  border-right: 5px solid #000;
  top:32px; 
  color:#f22354;
 
} 
.menu_div a {
color:#f22354;}

.md1{ 
  width:350px;
   left:-1px; 
} 

.md2{ 
  width:550px;
   left:-1px;
} 

.md3{ 
  width:450px;
   left:-1px; 
  color:#f22354; 
  padding:10px; 
} 

.md4{ 
  color:#f22354; 
  padding:10px; 
  width:200px;
  right:-1px; 
} 

.md3 img { 
  float:right; 
  background:#777; 
  padding: 5px 5px 5px 5px; 
  margin: 0px 0px 10px 10px; 
  border: 1px solid #444; 
} 

.ldd_nu { 
  float:right!important; 
}

все работает нормально ,но меню исчезает быстро почему то ,возможно сделать чтоб меню закрывалась только при клике на другое место сайта?

 

[Fatummors]

$span.stop().animate({'width':$span.data('width')+'px'},600);

Попробуйте увеличить последний параметр.

 

[bernex]

Я бы использовал таймер если нужен такой способ или css. Посмотреть bootstrap.

Ну если надо чтобы закрывалось по клику на сайте, то:

bind('mouseleave',function(){
    $("body").click(function() {
       $this.find('.menu_div').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},600);     
    });
  });

 

[MagicNoob]

А почему не сделать вот так вот:

<ul id="dm_menu" class="menu_top">
  <li class="dd">
      ...
  </li>
  <li class="dd">
      ...
  </li>
  <li class="dd">
      ...
  </li>
</ul>

$('.dd').hover(function(){
    $(this).find('.menu_div').slideToggle(150)
});

Для просмотра ссылки Войди или Зарегистрируйся