Форум

timedo · #1 (**permalink**) 03.05.2014, 20:59

Здрасте, с 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

timedo,
а без php можно? index.html

timedo · #3 (**permalink**) 03.05.2014, 22:08

да, конечно. Вот 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

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>

timedo · #5 (**permalink**) 03.05.2014, 22:59

рони, спасибо большое при большое!!!

timedo · #6 (**permalink**) 03.05.2014, 23:16

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

рони · #7 (**permalink**) 04.05.2014, 00:35

timedo,подкорректировал css

timedo · #8 (**permalink**) 04.05.2014, 00:49

рони,

Форум

Справочник

Discord чат

Курсы javascript