Question

我有一个基本菜单栏，可以点击。一切正常，但我注意到，如果我使浏览器窗口太小，子菜单打开视图，我无法在窗口中滚动查看它们。

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

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

提前致谢。

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);
    });
});

Answer 1

将您编写的所有CSS放入媒体查询中：

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

    .expand{
        display:block;
    }
}

这将使其仅在屏幕宽度超过900px时起作用。您可以更改该像素数。

现在在媒体查询之外编写您只想要移动设备的CSS。 mdeia查询中的样式将覆盖，但仅在满足条件时才会覆盖。

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

如何以小窗口大小显示子菜单？

1 个答案: