web应用(HTML)中top_nav_bar的设计选择

Design choice for top_nav_bar in web application(HTML)

本文关键字：bar nav 选择 top 应用 HTML web      更新时间：2023-09-26

很简单的问题。

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

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

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

我想我要问的问题是做这件事的最好方法是什么。

第一个猜测是使用表格来格式化数据并将它们分隔开:
这招管用，但看起来很草率。

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

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

第二个猜想是使用帧集:
想到这一点，我就狠狠地瞪了自己一眼

第三种猜测是保留所有css和Html
这似乎是最明智的一个旁边的表，但保持内容组织与多个按钮，这样听起来可能是麻烦的。

最后


使用JQuery或javascript UI库。这呈现了它自己的一组问题，但如果处理得当，可能是最漂亮的。

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

请求的视图图片。问题的一部分是top nav

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&电流= globalview.jpg

请勿使用表格。

只对表格数据使用表(这不是)。

使用div s作为容器，使用li s作为菜单。

编辑

这有点像我要做的:

http://jsfiddle.net/uf2zU/1/

使用元素的作用

并且可以很容易地使用CSS控制。

编辑2

http://jsfiddle.net/uf2zU/4/

我会使用一组HTML ul s和CSS，因为这是最超前的想法，加上它使用HTML的方式应该是。但是，如果您想使用表，请尝试border: none;和border-collapse: collapse;

对于演示部分，我会选择第三种猜测，因为这是最灵活的部分，至少对我来说是这样。如果你正确地分割了所有的部分，那么管理内容的任务就会变得非常容易，因为你将能够针对部分并使用它来设置任何样式。

此外，对于客户端功能，我会选择最后一个选项(即普通JavaScript和jQuery)，因为这是DOM操作的瑞士军刀。

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

我个人尽可能使用JQuery UI Tabs，因为它们是一个完善的UI模式，易于部署，并自动"Ajax加载"我的页面。当然，您会遇到一些"陷阱"，但对于一个熟练的jQuery用户来说，它们根本无法克服。

在我不能使用UI选项卡的情况下，我会在顶部做一个纯CSS栏，通过绝对定位"浮动"，如果这是客户端的规范。布局不适合表格(它们用于表格内容元素)，你说的对，框架没有位置。这应该不会比基本的页面布局更难，所以采用这种方法是很容易的。

对于通知，还有其他更明显、更及时的选项。所有其他小的，基本的信息可以包含在你的水平栏。

相关文章：