How to design webpage navigation menu which adjust

2019-08-25 08:52发布

站内问答 / JavaScript
503 1 4

I would like to create a simple webpage with a 2-column design, using some combination of HTML / CSS / Javascript / jQuery, in which one column contains a navigation menu with several links, and clicking on the links changes the content of the other column. What's the best way to do this nowadays?

A long time ago, I learned to do this with frames, with the menu in one frame and the content in another, and the menu items surrounded by anchor tags of form <a href="something.html" target="name-of-content-area">. I guess this way is still possible?

Some people recommend making the menu and content areas be divs instead of frames, and then putting an iframe inside the content div. The menu item links are then done in the same way just described.

Still other people recommend using divs only - no frames or iframes - and using Javascript to change the content in the content area, i.e. the anchor tags take a form like <a href="#" onclick=func> where func dynamically changes the content in the content area.

Finally, some people recommend using divs only and using buttons instead of anchor tags in the menu, and once again using Javascript attached to the buttons to adjust the content area content.

I guess there are more options I've missed. Is there a generally accepted modern best practice, if so is it one of those I've listed, which one, and why? If there's not a single best practice, what are the situations or reasons for using each of the alternative "good" options?

1条回答
相关推荐>>
2楼-- · 2019-08-25 09:40

There are various ways to do this:

  1. Frames
  2. Separate pages, each including a common navigation segment
  3. A single page with multiple virtual pages in it

Options 1 and 2 are self-explanatory. The advantage of 2 over 1 is that bookmarking and browser history are nice and simple. A lot of folks are veering towards 3 now.

Here's a simple JSFiddle I put together as an example of option 3. It's ugly, yes, I didn't bother styling anything.

http://jsfiddle.net/sJ6Bj/4/

Here's the HTML:

<html>

    <head>
        <title>Two-pane navigation</title>
    </head>

    <body>
        <div id="content">
            <div id="navigation">
                <h1>Navigation</h1>
                <ul>
                    <li><a href="#page1" class="page-link">Page 1</a></li>
                    <li><a href="#page2" class="page-link">Page 2</a></li>
                </ul>
            </div>

            <div id="pages">
                <div id="page1" class="page">
                    <h1>Page 1</h1>
                    <p>This is all the lovely content on page 1.</p>
                    <p>Let's add a bunch of stuff to make it scroll.</p>
                    <p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p>
                    <p>This is at the bottom of the page.</p>
                </div>

                <div id="page2" class="page">
                    <h1>Page 2</h1>
                    <p>This is all the lovely content on page 2.</p>
                </div>
            </div>
        </div>
    </body>

</html>

JavaScript (assumes JQuery is loaded):

$(document).ready(function() {
    $(".page-link").on("click", function(e) {
        $(".page").fadeOut(250);
        setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250);
    });
});

CSS:

#navigation {
    position: fixed;
    width: 250px;
    height: 100%;
    border-right: 1px solid black;
}

#pages {
    margin-left: 270px; /* 250px + 20px of actual margin */
}

.page {
    position: relative;
    display: none;
    overflow: scroll;
}

As @RobG said above, the browser considers it all to be one page currently. However, with something like JQuery BBQ, that can be added back in without much effort (e.g. see here).

Why would one choose divs over frames? There are various reasons.

  1. Frames cannot be bookmarked (see caveat above).
  2. The transition and animation support with frames is awfully limited, and with separate complete pages it is nonexistent. I did a simple fade-in/out in the fiddle above to demonstrate what is possible with divs.
  3. Nothing needs to be reloaded when the user changes "page" (although conversely, a lot more may need to be loaded up front).
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)