Question

我想创建一个包含大量子导航的垂直菜单，因为子导航数超出了窗口大小。如果我给overflow: auto;和特定高度，则第三级菜单将不可见。我看过滚动导航但无法正确使用。

这是HTML

    <ul class="ver-menu">
        <li><a href="#">Ver Menu- 1</a>
            <ul class="sub-menu-1">
                <li><a href="#">Ver sub Menu- 1</a>
                    <ul class="sub-menu-2">
                    <li><a href="#">Ver sub Menu- 1</a></li>
                    <li><a href="#">Ver sub Menu- 2</a></li>
                    <li><a href="#">Ver sub Menu- 3</a></li>
                    <li><a href="#">Ver sub Menu- 4</a></li>
                </ul>
                </li>
                <li><a href="#">Ver sub Menu- 2</a>
                  <ul class="sub-menu-2">
                    <li><a href="#">Ver sub Menu- 1</a></li>
                    <li><a href="#">Ver sub Menu- 2</a></li>
                    <li><a href="#">Ver sub Menu- 3</a></li>
                    <li><a href="#">Ver sub Menu- 4</a></li>
                </ul>
                </li>
                <li><a href="#">Ver sub Menu- 3</a></li>
                <li><a href="#">Ver sub Menu- 4</a></li>
                <li><a href="#">Ver sub Menu- 5</a></li>
                <li><a href="#">Ver sub Menu- 6</a></li>
                <li><a href="#">Ver sub Menu- 7</a></li>
                <li><a href="#">Ver sub Menu- 8</a></li>
                <li><a href="#">Ver sub Menu- 9</a></li>
                <li><a href="#">Ver sub Menu- 10</a></li>
                <li><a href="#">Ver sub Menu- 11</a></li>
                <li><a href="#">Ver sub Menu- 12</a></li>
                <li><a href="#">Ver sub Menu- 13</a></li>
                <li><a href="#">Ver sub Menu- 14</a></li>
                <li><a href="#">Ver sub Menu- 15</a></li>
                <li><a href="#">Ver sub Menu- 16</a></li>
                <li><a href="#">Ver sub Menu- 17</a></li>
                <li><a href="#">Ver sub Menu- 18</a></li>
                <li><a href="#">Ver sub Menu- 19</a></li>
                <li><a href="#">Ver sub Menu- 20</a></li>
                <li><a href="#">Ver sub Menu- 21</a></li>
                <li><a href="#">Ver sub Menu- 22</a></li>
                <li><a href="#">Ver sub Menu- 23</a></li>
                <li><a href="#">Ver sub Menu- 24</a></li>
            </ul>
        </li>
        <li><a href="#">Ver Menu- 2</a>
            <ul class="sub-menu-1">
                <li><a href="#">Ver sub Menu- 1</a></li>
                <li><a href="#">Ver sub Menu- 2</a></li>
                <li><a href="#">Ver sub Menu- 3</a></li>
                <li><a href="#">Ver sub Menu- 4</a></li>
            </ul>
        </li>
        <li><a href="#">Ver Menu- 3</a>
            <ul class="sub-menu-1">
                <li><a href="#">Ver sub Menu- 1</a></li>
                <li><a href="#">Ver sub Menu- 2</a></li>
                <li><a href="#">Ver sub Menu- 3</a></li>
                <li><a href="#">Ver sub Menu- 4</a></li>
            </ul>
        </li>
        <li><a href="#">Ver Menu- 4</a></li>
        <li><a href="#">Ver Menu- 5</a></li>
        <li><a href="#">Ver Menu- 6</a></li>
    </ul>

这是CSS

            #page-wrap                          { width: 960px; margin: 25px auto; } 
            p                                   { margin: 0 0 8px 0; }
            a                                   { text-decoration: none; }
            img                                 { vertical-align: middle; }
            a img                               { border: 0; 180}
            ul                                  { list-style: none; }
            h1                                  { margin: 0 0 10px 0; }
            .ver-menu{ margin:0; padding:0; width: 200px}
            .ver-menu li{ margin:0; padding:0; display: block; position: relative;}
            body                                { font: 15px Helvetica, Sans-Serif; } 
            .ver-menu li a{ margin:0; padding:10px; display: block; background: #CCC; border-bottom: 1px dotted #999; color:#000;}
            .sub-menu-1, .sub-menu-2 {
              left: 161px;
              position: absolute;
              display: none;
              top: 0;
                width: 150px;
              height: 150px;
            }
            .sub-menu-2{ left: 115px!important;}
            .ver-menu li:hover .sub-menu-1, .sub-menu-1 li:hover .sub-menu-2{ display: block;}
            .sub-menu-1 li{ position: relative;}

Answer 1

html的模型......类似于

<li> ...
  <ul class='submenu'>
    <li> ... 
    </li>
   </ul>
</li>

我像这样使用了一些jquery

$(.submenu).each( function(index){
     // find the height of the li element - assumes all li's are the same height 
     var height=parseInt($(this).parent().css('line-height'));
     // after 6 child elements the parent ul will display scrollbar
     var num=Math.min(6,$(this).children().length);
     $(this).css('min-height',function(){ return (height*num);}); 

});

上面的jquery将覆盖下面css中设置的默认最小高度

.submenu {
    min-height: 100px;
    overflow-y: auto;   
    overflow-x: hidden;
}
li {
    line-height: 30px
}

希望这有帮助

具有子导航的菜单的垂直滚动条

1 个答案: