如何设计在页面的不同部分调整内容的网页导航菜单 [英] How to design webpage navigation menu which adjusts content in separate section of page
问题描述
我想用两列设计创建一个简单的网页，使用HTML / CSS / Javascript / jQuery的一些组合，其中一列包含具有多个链接的导航菜单，然后单击链接可更改内容另一列。现在做这件事的最好方法是什么？
很久以前，我学会了用框架来做到这一点，菜单在一个框架中，内容在另一个框架中，由形式为< a href =something.htmltarget =名称的内容区域> 的锚标签包围的菜单项。我猜这种方式仍然有可能吗？
有些人建议将菜单和内容区域设置为div而不是帧，然后将iframe放入内容div中。然后，菜单项链接以刚才描述的相同方式完成。
还有人建议只使用div - 无框架或iframe - 并使用Javascript更改内容内容区域，即锚点标签采用类似< a href =＃onclick = func> 的形式，其中func动态更改内容区域中的内容。 p>
我想有更多的选项我错过了。是否有一个普遍接受的现代最佳实践，如果是我列出的那一个，哪一个，为什么？如果没有一个最佳做法，那么使用每个好选择的情况或原因是什么？
解决方案有多种方式可以做到这一点：
- 框架
- 单独的页面，每个页面都包含一个通用导航段
- 包含多个虚拟网页的单页
选项1和2是自我-explanatory。 2大于1的优点是书签和浏览器历史很好，而且很简单。现在很多人都转向3。
下面是一个简单的JSFiddle，我将其作为选项3的示例放在一起。它很丑，是的，我没有打扰造型任何东西。
http://jsfiddle.net/sJ6Bj / 4 /
以下是HTML：
< HTML>
< head>
< title>双窗格导航< / title>
< / head>
< body>
< div id =content>
< div id =navigation>
< h1>导航< / h1>
< ul>
< li>< a href =＃page1class =page-link> Page 1< / a>< / li>
< li>< a href =＃page2class =page-link> Page 2< / a>< / li>
< / ul>
< / div>
< div id =pages>
< div id =page1class =page>
< h1>第1页< / h1>
< p>这是第1页上所有可爱的内容。< / p>
< p>让我们添加一堆内容，让它滚动。< / p>
< p style =font-size：72px>。< br />。< br>。< br /> />.</p>
< p>这是在页面的底部。< / p>
< / div>
< div id =page2class =page>
< h1>第2页< / h1>
< p>这是第2页上所有可爱的内容。< / p>
< / div>
< / div>
< / div>
< / body>
< / html>
JavaScript（假设加载了JQuery）：
< $（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ fadeOut（250）;
setTimeout（function（）{$（$（e.currentTarget）.attr（href））。fadeIn（250）;}，250） ;
}）;
}）;
CSS：
#navigation {
position：fixed;
width：250px;
身高：100％;
border-right：1px纯黑色;
}
＃页数{
margin-left：270px; / * 250px + 20px的实际保证金* /
}
.page {
position：relative;
display：none;
overflow：scroll;
}
正如@RobG上面所说，浏览器认为它全部为一页。但是，使用诸如 JQuery BBQ 之类的东西，可以毫不费力地重新添加（请参阅此处）。
为什么会选择divs over frames？原因有很多。
- 不能将书签标为书签（参见上文注释）。
- 并且对帧的动画支持非常有限，并且单独的完整页面不存在。我在上面的小提琴中做了一个简单的淡入/淡出来演示divs可能有什么。
- 当用户改变page时不需要重新加载任何东西（尽管相反，很多更多可能需要先加载）。
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?
There are various ways to do this:
- Frames
- Separate pages, each including a common navigation segment
- 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.
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.
- Frames cannot be bookmarked (see caveat above).
- 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.
- Nothing needs to be reloaded when the user changes "page" (although conversely, a lot more may need to be loaded up front).
这篇关于如何设计在页面的不同部分调整内容的网页导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
