Slyweb
На разработку сайта! Скидки 50%!

Не выпадают подпункты меню

Здесь обсуждается всё, что касается jQuery

Не выпадают подпункты меню

Сообщение Nikolay321 » 24 авг 2012, 12:55

Добрый день. Есть меню, при наведении на пункты меню первого уровня - выпадают подпункты второго уровня. При наведении на подпункты второго уровня должны выпадать подпункты третьего уровня, но не выпадают. Код:

HTML:
Код: Выделить всё
<ul>
        <li><a href="#">Пункт 1</a>
            <ul>
                <li><a href="#">Пункт 11</a></li>
                <li><a href="#">Пункт 12</a>
                    <ul>
                        <li><a href="#">Пункт 121</a>
                            <ul>
                                <li><a href="#">Пункт 1211</a></li>
                                <li><a href="#">Пункт 1212</a></li>
                                <li><a href="#">Пункт 1213</a></li>
                                <li><a href="#">Пункт 1214</a></li>
                                <li><a href="#">Пункт 1215</a></li>
                                <li><a href="#">Пункт 1216</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Пункт 122</a></li>
                        <li><a href="#">Пункт 123</a></li>
                        <li><a href="#">Пункт 124</a></li>
                        <li><a href="#">Пункт 125</a></li>
                        <li><a href="#">Пункт 126</a></li>
                    </ul>
                </li>
                <li><a href="#">Пункт 13</a>
                    <ul>
                        <li><a href="#">Пункт 131</a></li>
                        <li><a href="#">Пункт 132</a></li>
                        <li><a href="#">Пункт 133</a></li>
                        <li><a href="#">Пункт 134</a></li>
                        <li><a href="#">Пункт 135</a></li>
                        <li><a href="#">Пункт 136</a></li>
                    </ul>
                </li>
                <li><a href="#">Пункт 14</a></li>
                <li><a href="#">Пункт 15</a></li>
                <li><a href="#">Пункт 16</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт 2</a></li>
   <li><a href="#">Пункт 3</a>
            <ul>
                <li><a href="#">Пункт 31</a></li>
                <li><a href="#">Пункт 32</a></li>
                <li><a href="#">Пункт 33</a></li>
                <li><a href="#">Пункт 34</a></li>
                <li><a href="#">Пункт 35</a></li>
                <li><a href="#">Пункт 36</a></li>
            </ul>
        </li>
   <li><a href="#">Пункт 4</a></li>
        <li><a href="#">Пункт 5</a></li>
   <li>a href="#">Пункт 6</a></li>
    </ul>
<

CSS:
Код: Выделить всё
*{
    margin: 0;
    padding: 0;
}

ul{
    border: 1px dashed #777;
    float: left;
}

li{
    list-style: none;
    float: left;
    width: 140px;
    position: relative;
    }

/* Первый подуровень*/
ul li ul{
    display: none;
}


ul li ul li{
    background: #ffcccc;    /* Розовый */
}

/* Второй подуровень*/
ul li ul li ul{
    position: absolute;
    left: 140px;
    top: 0;
}


}

ul li ul li ul li{
    background: #ccffcc;    /* Салатовый */
}

/* Третий подуровень*/

ul li ul li ul li ul li{
    background: #ccccff;    /* Сиреневый */
}

a{
    display: block;
    margin: 1px;
    border: 1px solid #000077;
}

JS:
Код: Выделить всё
$(document).ready(function(){
 
    var topItem = $('ul li');
    var drop1ulLi = $('ul li ul li');
   
    topItem.hover(function(){
            $(this).children('ul').show(100);
        },function(){
            $(this).children('ul').hide(100);
        });
   
    drop1ulLi.hover(function(){
        $(this).children('ul').show(100);
        },function(){
        $(this).children('ul').hide(100);
        })
});
Nikolay321
 
Сообщения: 1
Зарегистрирован: 24 авг 2012, 12:36

Re: Не выпадают подпункты меню

Сообщение admin » 24 авг 2012, 14:19

Я бы не стал вкладывать списки друг в друга и задавать для родительских контейнеров position:relative; Так как дочерние элементы будут показаны, но пользователь их не увидит, так как их свойство overflow скрывает.

Код: Выделить всё
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<title>
Home </title>
<link rel="icon" href="favicon-vfldLzJxy.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon-vfldLzJxy.ico" type="image/x-icon">
<meta name="description" content="Отправьте видео друзьям, близким и всему миру">

<script type="text/javascript" src="/assets/templates/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
border: 1px dashed #777;
float: left;
overflow: visible;
}
li{
list-style: none;
float: left;
width: 140px;
position: relative;
overflow: visible;
}
/* Первый подуровень*/
ul li ul{
display: none;
overflow: visible;
}
ul li ul li{
background: #ffcccc; /* Розовый */
}
/* Второй подуровень*/
ul li ul li ul{
position: absolute;
left: 140px;
top: 0;
overflow: visible;
}
}
ul li ul li ul li{
background: #ccffcc; /* Салатовый */
}
/* Третий подуровень*/
ul li ul li ul li ul li{
background: #ccccff; /* Сиреневый */
}
a{
display: block;
margin: 1px;
border: 1px solid #000077;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
   var topItem = $('ul li');
   
   topItem.hover(function(){

      $(this).children('ul').css('overflow','visible').stop().show(100);
   },function(){
      $(this).children('ul').stop().hide(100);
   });
});
</script>
</head>
<body dir="ltr">
<ul>
   <li><a href="#">Пункт 1</a>
   <ul>
      <li><a href="#">Пункт 11</a></li>
      <li><a href="#">Пункт 12</a>
      <ul>
         <li><a href="#">Пункт 121</a>
         <ul>
            <li><a href="#">Пункт 1211</a></li>
            <li><a href="#">Пункт 1212</a></li>
            <li><a href="#">Пункт 1213</a></li>
            <li><a href="#">Пункт 1214</a></li>
            <li><a href="#">Пункт 1215</a></li>
            <li><a href="#">Пункт 1216</a></li>
         </ul>
         </li>
         <li><a href="#">Пункт 122</a></li>
         <li><a href="#">Пункт 123</a></li>
         <li><a href="#">Пункт 124</a></li>
         <li><a href="#">Пункт 125</a></li>
         <li><a href="#">Пункт 126</a></li>
      </ul>
      </li>
      <li><a href="#">Пункт 13</a>
      <ul>
         <li><a href="#">Пункт 131</a></li>
         <li><a href="#">Пункт 132</a></li>
         <li><a href="#">Пункт 133</a></li>
         <li><a href="#">Пункт 134</a></li>
         <li><a href="#">Пункт 135</a></li>
         <li><a href="#">Пункт 136</a></li>
      </ul>
      </li>
      <li><a href="#">Пункт 14</a></li>
      <li><a href="#">Пункт 15</a></li>
      <li><a href="#">Пункт 16</a></li>
   </ul>
   </li>
   <li><a href="#">Пункт 2</a></li>
   <li><a href="#">Пункт 3</a>
   <ul>
      <li><a href="#">Пункт 31</a></li>
      <li><a href="#">Пункт 32</a></li>
      <li><a href="#">Пункт 33</a></li>
      <li><a href="#">Пункт 34</a></li>
      <li><a href="#">Пункт 35</a></li>
      <li><a href="#">Пункт 36</a></li>
   </ul>
   </li>
   <li><a href="#">Пункт 4</a></li>
   <li><a href="#">Пункт 5</a></li>
   <li><a href="#">Пункт 6</a></li>
</ul>
</body>
</html>
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02


Вернуться в Всё о jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron