0

我是编码网页的新手，在某些屏幕上显示完整的垂直菜单时遇到了一些困难。菜单设计为在内容可以滚动时保持固定，这在垂直分辨率较低的设备上造成了困难：它们无法滚动以查看所有可用的菜单选项。解决这个问题的合理方法是什么？下面给出了一些最小的代码（带有更多的菜单选项）来说明问题。

任何关于可能改进的额外评论都将受到欢迎。目的是使该网页可在多种设备（台式机、平板电脑、电话等）上使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>title</title>
        <style type="text/css">
            body, html{
                margin: 0;
                padding: 0;
                background: #c0c0c0;
                color: #000000;
                font-size: 15px;
                line-height: 1.5;
                text-align: justify;
            }
            h1 {
                margin: 0;
            }
            h2 {
                margin: 0;
            }
            a:link {
                color: #cb4c2f;
                text-decoration: none;
            }
            a:visited {
                color: #cb4c2f;
            }
            a:active, a:hover {
                color: #b60a00;
            }
            #line_1 {
                size: 500px;
                border-top: 1px solid #000000;
            }
            #line_2 {
                size: 500px;
                border-top: 1px solid #c0c0c0;
            }
            .button_1 {
                width: 100px;
                height: 100px;          
                background-color: #c0c0c0;
                border: 1px solid #c0c0c0;
                display: inline-block;
                color: #000000;
                font-size: 10px;
                text-align: left;
                white-space: normal;
                font-weight: bold;
                padding: 10px 10px;
                text-decoration: none;        
                text-shadow: 0px 0px 0px #c0c0c0;        
            }
            .button_1:hover {
                color: #c0c0c0;
                background-color: #000000;
                border: 1px solid #000000;
            }
            .button_1:active {
                position: relative;
                top: 0px;
                background-color: #c0c0c0;
                border: 1px solid #c0c0c0;
                color: #000000;
            }
            #wrap_1 {
                width: 600px;
                margin: 0 auto;
                background: #5c5c5c;
            }
            #header_1 {
                padding: 5px 10px;
                background: #dddddd;
                border-top: 1px solid #5c5c5c;
                border-bottom: 1px solid #5c5c5c;
            }
            #main_1 {
                float: right;
                width: 450px;
                padding: 10px;
                background: #dddddd;
                min-height: 744px; 
            }
            #sidebar_1 {
                position: fixed;
                float: left;
                width: 130px;
                padding: 0px;
                background: #5c5c5c;
                text-align: center;
            }
            #footer_1 {
                clear: both;
                padding: 5px 10px;
                background: #dddddd;
                border-top: 1px solid #5c5c5c;
                border-bottom: 1px solid #5c5c5c;
            }
        </style>
    </head>
    <body>
    <div id="wrap_1">
        <div id="header_1"><h1>TITLE</h1></div>
        <div id="main_1">
            content
        </div>
        <div id="sidebar_1">
            <br>
            <input value="HOME" onclick="location.href='index.html';" type="button" class="button_1"><br><br>
            <input value="RESOURCES" onclick="location.href='resources.html';" type="button" class="button_1"><br><br>
            <input value="LABORATORY NOTEBOOK" onclick="location.href='laboratory_notebook.html';" type="button" class="button_1"><br><br>
            <input value="WEBLOG" onclick="location.href='weblog.html';" type="button" class="button_1"><br><br>
            <input value="PUBLICATIONS" onclick="location.href='publications.html';" type="button" class="button_1"><br><br>
            <input value="LINKS" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
            <input value="ANOTHER LINK" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
            <input value="ANOTHER LINK" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
            <input value="ANOTHER LINK" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
            <hr class="line_2" border=0 size=0>
        </div>
        <div id="footer_1">
        </div>
    </div>
    </body>
</html>
4

2 回答 2

1

Like optimarcusprime said, you want your page to respond to the client's viewport size. This is called responsive web design. Just wanted to give a more concrete answer.

In your case, you'll want to add a media query to your css. Media queries help you limit the application of CSS rules to when the specified conditions apply. In your case, you could change the sidebar_1's position to relative when the screen is below a certain height. Put this declaration at the end of your CSS:

@media (max-height: 320px) {
    #sidebar_1 {
        position: relative;   
    }
}

So, any viewport (the size of the client's viewing area) that is 320px and below will have a menu that is positioned relatively (you can change 320px to any height you want). That way, it will scroll down when the user does.

Here is a jsfiddle with the change: http://jsfiddle.net/yJA4h/1/.

Here is a link to the MDN docs on media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

-- Additional Comments --

Since you asked for additional comments, I thought I'd add them here below the main answer. These are mostly just general web development best practices:

  1. These days, developers mostly avoid inline JavaScript. So, step 1, you can change the <input> elements to simple <a> tags with href attributes. An href attribute tells the browser where to go when that element is clicked.

This from your markup

<input value="HOME" onclick="location.href='index.html';" type="button" class="button_1">

would become

<a href="index.html" class="button_1">HOME</a>

It provides the same functionality with fewer keystrokes!

  1. Web developers are now also moving away from HTML markup that affects the design of a page. Under that philosophy, most of the design action happens in your CSS style declarations. To convert your markup to this philosophy, you could start by removing the <br> elements. For example, all of your <input> tags (or <a> tags if you followed the advice in #1) share class (button_1) already, you could give them margin-bottom in the CSS.

Where you have

.button_1 {
    ...
}

above in the style declarations, add

    margin-bottom: 10px; /* or some other number */

to create space between each element that has the class .button_1.

One of the benefits of these changes is maintainability. It's possible that you could decide you don't want space between the buttons or you want more space. Right now, you'd have to change around 9 lines of your HTML. If you go the CSS route, it's just one spot that needs a change.

于 2013-06-18T00:43:06.993 回答
0

有几个选项可用。在我的头顶上：

  • 为侧边栏提供以下属性：“高度：100%；溢出：滚动；”。这将强制侧边栏永远不会高于父元素，它应该是浏览器窗口。但是，这也会导致侧边栏中出现滚动条。

  • 学习响应式网页设计。这是一个相对较新的 Web 开发领域，它利用新的 CSS 技术和 JavaScript 来根据浏览器窗口的大小或它所在的设备来操纵页面的显示方式。这可能是您最好的选择，因为它正在/已经成为良好 Web 开发的标准。从这里开始：http: //coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

祝你好运！

于 2013-06-18T00:27:36.973 回答