Question

我正在网站上工作，我遇到了一个问题，我无法在网上找到任何解决方案，所以感谢您的帮助。

我设计了一个下拉菜单，这就是问题：如果页面被放大，它会分成2行（不需要，因为它是一个下拉菜单！），但如果我设置了最小值 - 菜单的宽度，因为位置设置为绝对，我无法向右滚动，菜单就会离开屏幕。如果我为body标签设置了最小宽度，它也不起作用，因为它允许我滚动主体，但菜单保持不变！这令人沮丧

这个位置必须保持绝对，否则我需要一个完整的方法来保持它的顶部，并感谢你的帮助，所以我正在寻找一个解决方案让我滚动到右边，如果屏幕是真的放大，就像在智能手机中一样。

这是菜单代码（不是全部的，因为它太长了，但主要部分。要查看更多，请求它或访问页面并查看源代码）。

网站：http://newfutureuniversity.org/

HTML：

...
<body>
    <div id="container">
        <div class="menu" >
            <ul>
                <li><a href="http://newfutureuniversity.org/">New Future</a></li>
                <li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
                <ul class="bottom">
                ...
                </ul>
                </li>
...

CSS：

body                /* Changes the style for the whole body */
    {
    position:absolute;
    margin:0px;         /* Avoids margin in the whole page */
    padding:0px;
    border:0px;
    background-color: #EEEEEE;  /* Default background color, light grey */
    height:100%;            /* Vertically complete */
    width:100%;
    min-width:400px;
    min-height: 100%;
    color: #333;            /* Letters color */
    }

#container          /* The container has the header, main and footer inside */
    {
    position:relative;
    margin:0px;
    padding:0px;
    min-height: 100%;       /* Avoids the footer to go up */
    height: auto !important;
    height: 100%;
    margin: 0px auto -51px;
    }
.menu
    {
    position: fixed;
    top:0px;
    left:0px;
    opacity:0.3;
    filter:alpha(opacity=30);   /* For IE8 and earlier */
    width:100%;
    min-width:400px;
    border:none;
    border-bottom:1px solid gray;
    margin:0px;
    padding:0px;
    font-size:18px;
    z-index:3;
    }

.menu ul
    {
    background:#DDD;
    height:26px;
    list-style:none;
    margin:0px;
    padding:0px;
    z-index:3;
    }
    .menu li{
        width:24.5%;
        min-width:93px;
        float:left;
        padding:0px;
        margin: 2px 0px 2px 0.5%;
        }
...

编辑：您需要取消最大化并缩放以在桌面浏览器中查看问题。

Answer 1

我不太确定你的意思是分成两行。我在Firefox，Chrome，IE，Opera和iPhone上查看了您的网站，无法重现您的问题。菜单只是从屏幕上溢出，最后一个项目“Get In”不在视野范围内。我担心你可能会遇到设计问题。我不鼓励你建立“一站式的所有人”，而是针对你的观众。

您的所需解决方案与菜单设计相对无关。您正在使用固定/绝对位置并相对于窗口/屏幕视图进行定位。当您在网页上缩放屏幕“浮动”时，绝对定位对象的位置相对于屏幕（而不是页面）而不会移动。

你可以用js脚本解决这个问题，这个脚本可以根据比例修改定位，但我建议不要这样做。我试图解决类似的问题，这很快变成了设备特定的调试是一个噩梦，最糟糕的是我们今天挣扎的浏览器噩梦。

至于解决方案，我强烈建议您研究一些不同的框架。首先是CSS解决方案，lessframework。它为您提供了一个简单的框架，可用于多设备兼容布局，而无需深入研究js。另一方面，如果JavaScript不是问题结帐jQuery Mobile。您可以轻松生成具有良好过渡效果的下拉菜单，这与您创建的非常相似。

菜单退出屏幕但页面无法滚动

1 个答案: