Javascript web应用程序中顶部导航栏的设计选择（HTML）

这个问题很简单

这只是一些基于个人意见和最佳实践的建议。 这很难解释，所以我会画出最好的图像。 试着想象一下，我有一个旧网站，在最上面有一个导航栏，分为3行

顶部是应用程序：设置、配置文件、登录/退出 第二个是通知：错误，新消息 第三部分是导航部分功能

所以我们有3行支持不同的功能和明显不同的配色方案。每一页不超过总页高的5%

我想我要问的问题是什么是最好的方法

第一个猜测是使用表格格式化数据并将其隔开：
这很管用，但看起来很邋遢

{
    border-collapse: collapse;
    border-spacing: 0;
}

似乎填补了表格中的任何空白，但看起来不对劲

第二个猜测是使用帧集：
我想都没想，就给自己拍了一张肮脏的脸

第三个猜测是保留所有css和Html
这似乎是桌子旁边最明智的选择，但用多个按钮来组织内容似乎很麻烦

最后
使用JQuery或javascript UI库。这本身就存在一系列问题，但如果做得好，可能是最漂亮的

所以，如果是你，你会怎么做这个简单的任务，为什么

---

按要求提供视图图片。问题的部分是顶部导航

---

一个水平导航条——一个水平实体。因此，我不会将元素“堆叠”为行，而是列。这是一个巨大的标题和视觉上更容易理解的东西之间的区别。伸展你的元素，使用图标，等等。如果你真的需要长篇大论，那就用大菜单吧

我个人尽可能使用jQueryUI选项卡，因为它们是一种完善的UI模式，易于部署，并且可以自动“Ajax加载”我的页面。当然，您会遇到一些“问题”，但对于一个有能力的jQuery用户来说，这些问题是无法克服的

在我不能使用UI选项卡的情况下，我会在顶部做一个纯CSS条，如果客户机要求的话，通过绝对定位“浮动”。布局不是表格的位置（它们是表格内容元素），框架没有位置、句点是对的。这应该不会比基本的页面布局更难，所以走这条路线是很容易的

---

对于通知，还有其他更明显、更及时的选择。试试你的单杠上可能包含的或所有其他小的、基本的信息。

我会使用HTML

ul

s和CSS集来实现这一点，因为这是最具前瞻性的想法，而且它使用HTML的方式应该是这样的。但是，如果要使用表，请尝试

border:none和
边框折叠：折叠
对于演示部分，我会选择第三种猜测，因为这是最灵活的部分，至少对我来说是这样。如果您正确地分割了所有的部分，那么管理内容的任务将变得非常简单，因为您将能够针对该部分并使用它设置任何样式

此外，对于客户端功能，我将使用最后一个选项（即香草JavaScript和jQuery），因为这是DOM操作的瑞士军刀。
不要为此使用表

仅对表格数据使用表格（这不是）

只需对容器使用
div
s，对菜单使用
li
s即可

编辑

这有点像我会做的：


这使用了元素的用途

并且可以使用CSS轻松控制

编辑2

提供一个草图或屏幕截图肯定会有帮助……不值得给出答案，但除了表格数据之外，永远不需要任何布局表格。@bpeterson76完成。问题底部的链接。底部的两段仍然相关，但有一个屏幕截图，如您在注释中所要求的。我不认为把它们叠成柱子会有帮助。请看一看，如果你认为你的答案仍然有效，请告诉我。@overtone，绝对正确。优秀UI设计的关键之一是隐藏您的复杂性。仅仅因为你有一个区域来传达信息并不意味着它必须总是可见的。我确实支持这样一种观点：为了简单起见，水平菜单不应该堆叠起来。这里有一些好的想法：这个链接几乎正是我想要的。让元素浮动到两边会有点麻烦（比如在最左边有一个按钮，最右边有一个按钮）。请随意查看编辑的问题中的设计文档，但是nav似乎在页面内容拉伸方面存在一些问题。它似乎把它归为一组width@overtone当前位置查看我编辑的小提琴。如果您有任何问题/某些东西不能按预期工作，请告诉我，我会尝试修复它。您的代码第一次运行良好。不过，我去掉了导航标签，将链接替换为按钮，这导致了它自身的一系列问题。非常感谢你，你用这个回答了我的“其他”问题。我在关上按钮时遇到了一些问题。我选择了两种解决方案的混合。我了解了一些CSS和li。你的代码非常简单。谢谢我在用桌子，这确实帮了大忙，但是你说我不应该用桌子的权利