Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2014, 11:13
Аспирант
Отправить личное сообщение для dimas15 Посмотреть профиль Найти все сообщения от dimas15
 
Регистрация: 21.08.2012
Сообщений: 86

Меню на js работает с багами
Написал меню а оно как то странно работает, помогите допилить. как сделать так чтобы быстрее скрывалось, а то получается что ещё не успело спрятаться старое меню как накладывается новое. ну а так вроде норм, хотя может вы свой функционал предложите если есть варианты как его улучшить http://jsfiddle.net/wfhF8/ я как на сайте http://ria.ru/ хотел такое меню сделать.
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2014, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

dimas15,
Вариант меню ...
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
  .top_menu li{
    border-right:1px solid #B5C5D1;
    display:inline-block;
    height:21px;
    margin-bottom:7px;
    margin-top:7px;
    padding-left:17px;
    padding-right:12px;
  }

  .top_menu{
    background-color:#EDF6FC;
    border-bottom:1px solid #C2CBD4;
    height:68px;
    margin-bottom:17px;
    margin-left:10px;
    width:1180px;
  }

  .menu-top-container{
    position:relative;
  }

  .sub-menu{
    left:9px;
    position:absolute;
    top:29px;
    display:none;
    width:800px;
    height:20px;
  }

  .sub-menu li{
    border-right:none;
    display:inline-block;
  }

  .sub-menu li a{
    text-decoration:none;
  }

  .sub-menu a{
    text-decoration:none;
  }

  .sub-menu:hover{
    text-decoration:underline;
  }

  ul.sub-menu li:active,.top_menu li a:active{
    background-color:green;
  }
  </style>



<script>

$(function () {
     $(document).ready(function () {
         var $li = $('ul.top_menu > li');
         $li.mouseenter(function () {
             $('ul', $li.not(this)).slideUp(300);
             $('ul', this).stop().slideDown('slow');
         })
             .mouseleave(function () {
                 $('ul', this).stop().slideUp('slow');
             });

     });
 });
</script>
</head>
<body>
  <div class="menu-top-container">
<ul id="menu-top" class="top_menu">


<li id="menu-item-156551" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-156551"><a href="#">Новости</a>
<ul class="sub-menu">
	<li id="menu-item-156552" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156552"><a href="#">Город</a></li>
	<li id="menu-item-156553" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156553"><a href="#">Происшествия</a></li>
	<li id="menu-item-156555" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156555"><a href="#">Дороги</a></li>
	<li id="menu-item-156557" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156557"><a href="#">Ленинградская область</a></li>
</ul>
</li>

<li id="menu-item-156559" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-156559"><a href="#">Фотобанк</a>
<ul class="sub-menu">
	<li id="menu-item-156560" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156560"><a href="#">Организации</a></li>
	<li id="menu-item-156556" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156556"><a href="#">Транспорт</a></li>
	<li id="menu-item-156558" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156558"><a href="#">Разное</a></li>
	<li id="menu-item-156554" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-156554"><a href="#">Строительство</a></li>
</ul>
</li>
</ul>
</div>
</body>


</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
js для плавного увеличения пункта меню при наведении Серега187 Элементы интерфейса 2 19.10.2013 11:33
Выпадающее окно из меню js igor-igor-22 jQuery 3 19.08.2013 20:23
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 18:49
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 12:41
Меню сайта на JS lawer Работа 6 26.09.2009 21:47