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

Тема в разделе "JavaScript", создана пользователем karencho, 23 фев 2014.

Модераторы: ZiX
  1. karencho

    karencho Создатель

    Регистр.:
    26 фев 2012
    Сообщения:
    43
    Симпатии:
    1
    здравствуйте вот это сам скрипт меню :
    Код:
    <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; 
    } 
    все работает нормально ,но меню исчезает быстро почему то ,возможно сделать чтоб меню закрывалась только при клике на другое место сайта?
     
  2. Fatummors

    Fatummors Создатель

    Регистр.:
    4 мар 2010
    Сообщения:
    11
    Симпатии:
    1
    $span.stop().animate({'width':$span.data('width')+'px'},600);

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

    bernex Создатель

    Регистр.:
    23 авг 2013
    Сообщения:
    11
    Симпатии:
    0
    Я бы использовал таймер если нужен такой способ или 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);     
        });
      }); 
     
  4. MagicNoob

    MagicNoob Создатель

    Регистр.:
    27 фев 2014
    Сообщения:
    15
    Симпатии:
    3
    А почему не сделать вот так вот:
    HTML:
    <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)
    });
    http://jsfiddle.net/LUf95/