如何获得显示小窗口大小的子菜单？

我有一个基本的菜单栏，点击工作。一切工作正常，但我注意到，如果我让浏览器窗口太小，子菜单打开视图，我不能在窗口中滚动来查看它们。如何获得显示小窗口大小的子菜单？

如果您在手机上查看我真的很容易看到我在说什么。我会如何自动添加滚动条，以确保我的网页的所有内容都可以看到？

小提琴：http://jsfiddle.net/2SC5G/6/ 搜索>结果>最新的SMOKE RESULTS是本演示中最长的选择。为了看看我在说什么，调整浏览器大小并将右边框放在“搜索”菜单项旁边。

在此先感谢。

HTML：

<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> --> 
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="includes/tp_menu.js"></script></script> 
    <link type="text/css" href="includes/tp_menu.css" rel="stylesheet" /> 
</head> 
<body> 
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;"> 
     <div id="menuJQ"> 
      <ul class="menuJQ"> 
       <li class="parent"><a href="#"><span>Home</span></a></li> 
       <li><a class="parent" href="#"><span>Product View</span></a> 
        <div id="submenu"> 
         <ul> 
          <li><a href="http://www.google.com"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
         </ul> 
        </div> 
       </li> 
       <li class="parent"><a href="#"><span>Request Tool</span></a></li> 
       <li><a href="#" class="parent"><span>Search</span></a> 
        <div id="submenu"> 
         <ul> 
          <li><a href="http://www.google.com"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
          <li><a href="#"><span>Integrity Query</span></a></li> 
          <li><a href="#"><span>Internal DevTasks</span></a></li> 
          <li><a href="#" class="parent"><span>Results</span></a> 
           <div id="submenu"> 
            <ul> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a> 
              <div id="submenu"> 
               <ul> 
                <li><a href="#"><span>DevTask Search</span></a></li> 
                <li><a href="#"><span>Active Machines</span></a></li> 
                <li><a href="#"><span>Integrity Query</span></a></li> 
               </ul> 
              </div> 
             </li> 
            </ul> 
           </div> 
          </li> 
          <li><a href="#"><span>Issues for Stability Team</span></a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

CSS：

/* menu::base */ 
.expand{ 
    display:block; 
} 
.collapse{ 
    display:none; 
} 
div#menuJQ { 
    height: 46px; 
    padding-left: 0px; 
    width:auto; 
    /*background: url(../includes/images/right2.png) repeat right 0;*/ 
    background-color:black; 
} 

div#menuJQ ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
} 
div#menuJQ ul.menuJQ { 
    padding-right: 0px; 
} 

div#menuJQ li { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    display: block; 
    float: left; 
    z-index: 9; 
    width: auto; 
} 

div#menuJQ ul ul li { 
    z-index: 9; 
} 
div#menuJQ li div { 
    list-style: none; 
    float: left; 
    position: absolute; 
    z-index: 11; 
    top: 39px; 
    left: -18px; 
    -left: 4px; 
    visibility: hidden; 
    transition-delay: 0.5s; 
    -moz-transition-delay: 0.5s; /* Firefox 4 */ 
    -webkit-transition-delay: 0.5s; /* Safari and Chrome */ 
    -o-transition-delay: 0.5s; /* Opera */ 
    width: 180px; 
     margin: 0px 0 0 -4px; 
    padding: 0; 
    background: url(../includes/images/submenu-top.png) no-repeat 0px 0; 
    -background: url(../includes/images/submenu-top.gif) no-repeat 0px 0; 
} 
div#menuJQ ul ul { /*submenu*/ 
    display:none; 
     z-index: 12; 
     width: 180px; 
    padding: 0px 0px 12px 0px; 
    -padding: 0px 0px 3px 0px;  
    /*background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;*/ 
    background-color:black; 
    -background: #E4E4E2 none;   
    margin: 14px 0 0 0; 
    -margin: 5px 0 0 0;  
} 
div#menuJQ li > div { 
    visibility: visible; 
} 

div#menuJQ a { 
    position: relative; 
    z-index: 10; 
    height: 38px; 
    display: block; 
    float: left; 
    line-height: 38px; 
    text-decoration: none; 
    margin-top: 1px; 
    white-space: nowrap; 
    width: auto; 
    padding-right:5px; 
    text-align:center; 
} 
div#menuJQ span { 
    margin-top: 2px; 
    padding-left: 15px; 
    color: #fff; 
    font: normal 13px Tahoma; 
    background: none; 
    line-height: 38px; 
    display: block; 
    cursor: pointer; 
    background-repeat: no-repeat; 
    background-position: 95% 0; 
    text-align: center; 
} 

/* menu::level1 */ 
div#menuJQ a { 
    padding: 0 15px 0 0; 
    line-height: 38px; 
    height: 46px; 
    _margin-right: 1px; 
    background: none; 
    font-weight:bold;  

} 
div#menuJQ span { 
    font-weight:bold; 
} 
div#menuJQ a:hover{ 
    background-image: url(../includes/images/selected-sub.png); 
    background-repeat: repeat-x; 
    background-position: right -1px;  
    -background: url(../includes/images/selected-sub.gif) repeat-x right -1px; 
} 
div#menuJQ li.current a, 
div#menuJQ ul.menuJQ>li:hover>a { 
    background-image: url(../includes/images/selected-sub.png); 
    background-repeat: repeat-x; 
    background-position: right -1px; 
    -background: url(../includes/images/selected-sub.gif) repeat-x right -1px; 
} 
div#menuJQ a:hover span{ 
     color: #ff9900; 
} 
div#menuJQ ul.menuJQ>li:hover>a span { 
     color: #ff9900; 
} 
div#menuJQ li {} 
div#menuJQ li.last { background: none; } 


/* menu::level2 */ 
div#menuJQ ul ul li { 
    background-image: url(../includes/images/sep-sub.png); 
    background-repeat: repeat-x; 
    background-position: left bottom; 
    margin: 0; 
    padding: 0; 
} 
div#menuJQ ul ul li:hover { 
    background-image: url(../includes/images/sub-item-hover.gif); 
    background-color: #717171; 
    background-repeat: repeat-x; 
    background-position: left top; 
} 
div#menuJQ ul ul a { 
     color: #ff9900; 
    height: auto; 
    float: none; 
    display: block; 
    line-height: 25px; 
    font-size: 13px; 
    z-index: -1; 
    padding: 6px 0 6px 0px; 
    white-space: normal; 
    width: 166px; 
    margin: 0 0px 0 13px; 
    background: none; 
} 

div#menuJQ ul ul a span { 
    color: #ff9900; 
     padding: 0 3px; 
    line-height: 25px; 
    font-size: 13px; 
    font-weight: normal; 
    margin:0;  
} 
div#menuJQ li.current ul a, 
div#menuJQ li.current ul a span { 
    background: none; 
} 
div#menuJQ ul ul a:hover { 
    background: none; 
    color: #fff; 
} 
div#menuJQ ul ul a:hover span { 
    background: none; 
    color: #fff; 
} 
div#menuJQ ul ul a.parent { 
    background: url(../includes/images/submenu-pointer.png) no-repeat right top; 
    -background: url(../includes/images/submenu-pointer.gif) no-repeat right top; 
    margin-right: -1px; 
} 
div#menuJQ ul ul a.parent span { 
    padding-right: 26px; 
} 
div#menuJQ ul ul a.parent:hover { 
    background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top; 
    -background: url(../includes/images/submenu-pointer.gif) no-repeat right top; 
} 
div#menuJQ ul ul a.parent:hover span { 
} 
div#menuJQ ul ul span { 

    margin-top: 0; 
    text-align: left; 
} 
div#menuJQ ul ul li.last { background: none; } 
div#menuJQ ul ul li { 
    width: 100%; 
} 

/* menu::level3 */ 

div#menuJQ ul ul div { 
     width: 180px; 
     padding: 0; 
    background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0; 
    -background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;  
    margin: -32px 0 0 198px !important; 
    margin: -32px 0 0 176px; 
} 
div#menuJQ ul ul ul { 
    padding: 11px 0px 9px 0px; 
    margin: 20px 0 0 0; 
} 
div#menuJQ ul ul div li { 
    position:relative; 
    top:-10px; 
} 

/* lava lamp */ 
div#menuJQ li.back { 
    background: url(../includes/images/selected-sub.png) no-repeat 0 0; 
    -background: url(../includes/images/selected-sub.gif) no-repeat 0 0;  
    width: 5px; 
    height: 46px; 
    z-index: 8; 
    position: absolute; 
    padding: 0; 
    margin: 0px 0 0 0; 
} 


div#menuJQ li.back .left { 
    padding:0; 
    width:auto; 
    background: url(../includes/images/selected-sub.png) repeat-x right 0; 
    -background: url(../includes/images/selected-sub.gif) repeat-x right 0;  
    height: 46px; 
    margin: 0 0 0 5px; 
    float: none; 
    position: relative; 
    top: 0; 
    left: 0; 
    visibility: visible; 
}

JQuery的：

$(document).ready(function(){ 
    $('#menuJQ > ul li').click(function(e) { 
     e.preventDefault(); 
      $('ul:first', this).show(); 
    }); 

    $('#menuJQ > ul li').mouseleave(function() { 
     $('ul', this).hide(); 
    }); 

    $('#submenu > ul li a').click(function(e) { 
     e.preventDefault(); 
     window.location = (this).href; 
     // var test = (this).href; 
     // alert(test); 
    }); 
});

来源

2013-02-22 B3st0fth3w0rst

使用媒体查询以某种窗口大小浮动菜单项。这看起来像很多简单的菜单代码... – elclanrs 2013-02-22 00:59:01

这是一个例子，为什么人们开始使用像http://twitter.github.com/bootstrap/这样的css框架。从长远来看，这会节省您的时间。 – andyzinsser 2013-02-22 01:17:56

把所有你写到媒体查询的CSS：

@media only screen and (min-width: 900px) { 

    .expand{ 
     display:block; 
    } 
}

这将使其仅适用于屏幕比900px宽的情况。您可以更改该像素数量。

现在在媒体查询之外编写您希望仅用于移动设备的CSS。只有满足条件时，mdeia查询中的样式才会覆盖。

如果你想对列表窗口小部件，您可以访问我的网页： http://instancia.net/jquery-plugin-mobile-list/ 收缩你的浏览器的宽度，看看小部件。在页面中的Zip文件。

来源

2013-02-22 01:04:38 AppleJunks

@elclanrs html实际上更长更详细，但为了可读性和简单性，我缩短了它的范例。我忘了缩短CSS。 – B3st0fth3w0rst 2013-02-22 01:57:21

如何获得显示小窗口大小的子菜单？

回答

相关问题