Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.05.2014, 20:59
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

Плавная менюшка
Здрасте, с js я не сильно знаком. Пытаюсь сделать плавно выпадающее меню на WP, почти все работает. При на видении мышки на определенное меню, выпадает список, но когда я убираю мышку, то список остается в меню вот так: http://gyazo.com/96ffcfb389ada15abfcc9a4627281eb3, как сделать что б когда я убираю мышку все вставало на свои места.

style.css
Код:
.menu{
	overflow:hidden; 
	list-style:none; 
	font-family: 'Bebas Neue';
	text-transform: none;
	font-size: 24px!important;		
}

.menu li a{
	color: #fff;
	display: block;
	padding: 17px 17px;
}

.menu li {
	list-style: none; 
	float: left;

}

.menu li a{
	-moz-transition: background-color 0.2s 0.1s ease;
	-o-transition: background-color 0.2s 0.1s ease;
	-webkit-transition: background-color 0.2s 0.1s ease;
	display:block;
}

.menu li:hover {
	background: #147e6a;
}

.menu li a:hover {
	background: #147e6a;
	text-decoration: none;
	z-index: 1000;
}

.menu li:hover ul{
	font-size: 14px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 46px;
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	background-color: #147e6a;
	margin-left:0px;
	z-index: 1000;
	float:left;
}

.menu li:hover ul li {
	float: none;
	width: 150px;
	border-right: none;
}

.menu li ul li a:hover {
	color:#EEEEEE;
}

.menu li ul {
	display: none;
}
index.html
<div class="outer">
				<div id="navcontainer">
					<div id="megaMenu" class="megaMenuContainer megaMenu-nojs wpmega-preset-clean-white megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnHover megaFullWidth megaMenuHorizontal wpmega-noconflict">
						<div class="menu">
								<?php wp_list_pages('title_li='); ?>
							</div>
								
						</div>				
					</div>
			</div>



js
<script src="http://code.jquery.com/jquery-latest.js"></script>	
			<script>
				$(document).ready(function(){
				$('.menu').mouseover(function () {
					if ($('.menu').mouseover) {
						$(".children").slideDown("slow");
					} else {
						$(".menu").hide();
					}
				});
			});
			</script>
Ответить с цитированием
  #2 (permalink)  
Старый 03.05.2014, 21:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timedo,
а без php можно? index.html
Ответить с цитированием
  #3 (permalink)  
Старый 03.05.2014, 22:08
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

да, конечно. Вот html который генерирует ворд пресс:
<div id="megaMenu" class="megaMenuContainer megaMenu-nojs wpmega-preset-clean-white megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnHover megaFullWidth megaMenuHorizontal wpmega-noconflict">
     <div class="menu">
		<li class="page_item page-item-81"><a href="http://wp/?page_id=81">asd</a>
                <ul class='children'>
	            <li class="page_item page-item-127"><a href="http://wp/?page_id=127">Seo</a></li>
	            <li class="page_item page-item-172"><a href="http://wp/?page_id=172">Web-дизайн</a></li>
                 </ul>
                </li>
              <li class="page_item page-item-2"><a href="http://wp/?page_id=2">Онлайн</a></li>
              <li class="page_item page-item-39"><a href="http://wp/?page_id=39">Первый сезон смотреть онлайн</a></li>
      </div>
</div>
Ответить с цитированием
  #4 (permalink)  
Старый 03.05.2014, 22:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timedo,
Вариант ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background: #FF4500;
  }

 .menu{
	overflow:hidden;
	list-style:none;
	font-family: 'Bebas Neue';
	text-transform: none;
	font-size: 24px!important;
}

.menu li a{
	color: #fff;
	display: block;
	padding: 17px 17px;
}

.menu li {
	list-style: none;
	float: left;

}

.menu li a{
	-moz-transition: background-color 0.2s 0.1s ease;
	-o-transition: background-color 0.2s 0.1s ease;
	-webkit-transition: background-color 0.2s 0.1s ease;
	display: inline-block;
}

.menu li:hover {
	background: #147e6a;
}

.menu li a:hover {
	background: #147e6a;
	text-decoration: none;
	z-index: 1000;
}

.menu  ul{
	font-size: 14px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 54px;
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	background-color: #147e6a;
	margin-left:0px;
	z-index: 1000;
	float:left;
}

.menu li:hover ul li {
	float: none;
	width: 150px;
	border-right: none;
}

.menu li ul li a:hover {
	color:#EEEEEE;
}

.menu  ul li{
    float: none;
}
.children {
  display: none;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
    $children = $('.children');
    $children.each(function(indx, el){
          var parent = $(this).parent();
          parent.mouseenter(function(){ $(el).stop().slideDown('slow') })
          parent.mouseleave(function(){ $(el).stop().slideUp('fast') })
          });
})
  </script>
</head>

<body>
<div id="megaMenu" class="megaMenuContainer megaMenu-nojs wpmega-preset-clean-white megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnHover megaFullWidth megaMenuHorizontal wpmega-noconflict">
     <div class="menu">
		<li class="page_item page-item-81"><a href="http://wp/?page_id=81">asd</a>
                <ul class='children'>
	            <li class="page_item page-item-127"><a href="http://wp/?page_id=127">Seo</a></li>
	            <li class="page_item page-item-172"><a href="http://wp/?page_id=172">Web-дизайн</a></li>
                 </ul>
                </li>
              <li class="page_item page-item-2"><a href="http://wp/?page_id=2">Онлайн</a></li>
              <li class="page_item page-item-39"><a href="http://wp/?page_id=39">Первый сезон смотреть онлайн</a></li>
      </div>
</div>

</body>

</html>

Последний раз редактировалось рони, 04.05.2014 в 00:34.
Ответить с цитированием
  #5 (permalink)  
Старый 03.05.2014, 22:59
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

рони, спасибо большое при большое!!!
Ответить с цитированием
  #6 (permalink)  
Старый 03.05.2014, 23:16
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

Я конечно извиняюсь за наглость, но можете подсказать почему когда убираешь мышку с подменю, они становятся горизонтально(а не вертикально как было) ?
Ответить с цитированием
  #7 (permalink)  
Старый 04.05.2014, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

timedo,подкорректировал css
Ответить с цитированием
  #8 (permalink)  
Старый 04.05.2014, 00:49
Аватар для timedo
Аспирант
Отправить личное сообщение для timedo Посмотреть профиль Найти все сообщения от timedo
 
Регистрация: 22.05.2013
Сообщений: 38

рони,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавная прокрутка страницы Ultimatum jQuery 4 12.12.2015 22:23
Плавная смена фото ozzon91 Общие вопросы Javascript 2 04.09.2012 21:01
Плавная смена нескольких картинок shurik330 jQuery 0 10.02.2012 16:10
Крутая Менюшка KingR Элементы интерфейса 10 27.05.2010 17:32
менюшка в верхнем углу KOLANICH Элементы интерфейса 13 07.05.2010 13:14