Плавная менюшка
Здрасте, с js я не сильно знаком. Пытаюсь сделать плавно выпадающее меню на WP, почти все работает. При на видении мышки на определенное меню, выпадает список, но когда я убираю мышку, то список остается в меню вот так: http://gyazo.com/96ffcfb389ada15abfcc9a4627281eb3, как сделать что б когда я убираю мышку все вставало на свои места.
style.css Код:
.menu{
<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>
|
timedo,
а без php можно? index.html |
да, конечно. Вот 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>
|
timedo,
Вариант ... :write:
<!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>
|
рони, спасибо большое при большое!!! :thanks:
|
Я конечно извиняюсь за наглость, но можете подсказать почему когда убираешь мышку с подменю, они становятся горизонтально(а не вертикально как было) ?
|
timedo,подкорректировал css
|
рони, :thanks: :thanks: :thanks:
|
| Часовой пояс GMT +3, время: 11:40. |