jQuery SlideDown Подменю Верхнее поле

У меня есть следующий код для скользящего меню:

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });

    jQuery('.menu>li>ul>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

Он работает плавно, за исключением случаев, когда отображается .menu ul ul, он скользит на один уровень вниз от своего родительского элемента, поэтому на него нельзя навести курсор. Я исправил это, используя отрицательное значение margin-top для .menu ul ul, но таким образом функция slideDown выглядит так, как будто она скользит с середины вверх и вниз, а не сверху вниз. Любые предложения о том, как исправить это через jQuery или CSS?

Вот файл CSS:

.menu {
         padding:0;
         margin: 0;
}

.menu ul{
         list-style: none;
         margin: 0;
         padding: 0;       
}

.menu li{ /*these will be main menu items*/
  list-style: none;
  float: left;
  line-height: 37px;
  font-family: Arial;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.menu li ul { /*first drop-down*/
 left: -999em;
 position: absolute;
 width: 186px;
 z-index: 500;
 background: #666666;
 display: none;
}

.menu li:hover ul {
  left: auto;
}

.menu li ul ul {
 margin-left: 186px; 
 display: none;
}

.menu li ul li {
  text-align: left;
  width: 186px;
}

.menu a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}

.menu li.active a {
  background: #454545;
}

.menu a:hover{
 color: #FBF4B6;
 background: #333;
}

.menu li ul li a {
  padding-left: 30px;
  padding-bottom:2px;
  padding-top:2px;
  border-bottom: 1px solid #999;
}

.menu li.active ul li a:hover {
  background: #333;
}

html jquery css joomla3.0
person geochanto    schedule 24.03.2014    source источник
comment
Привет, Джордж! Не могли бы вы добавить пример в jsFiddle? Я не знаю, что ваш HTML.   -  person Siva    schedule 25.03.2014
comment
Я еще не уверен, что не так. Каким-то образом подменю получает отступ в 40 пикселей. Хитрый способ — добавить margin-top: -40px в подменю ul, чтобы подменю перемещалось вверх. Я дам вам знать, если найду лучшее решение.   -  person Siva    schedule 25.03.2014
comment
Да, я уже знал, что могу это сделать, но есть проблема, когда я это делаю - подменю скользит вверх и вниз, чтобы добраться до верхнего поля, а не просто скользит сверху вниз. В обычном меню CSS это было исправлено, но с jQuery это работает не очень хорошо.   -  person geochanto    schedule 25.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

Наконец-то я нашел, как решить эту проблему здесь: http://jsfiddle.net/297t6/

.menu
{
    margin:0;
    padding:0;
}
.menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
.menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
.menu > li ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    z-index: 999;
}
.menu > li ul ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
    z-index: 999;
}
.menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}

Скопировал CSS и Javascript (который намного чище, чем у меня), изменил имена классов и вуаля - все работает.

person geochanto    schedule 25.03.2014