我的书签
添加书签
移除书签8.5 基本的动画的导航栏
随着Web站点越来越大，要访问到站点的每个部分，而又不想让页面中塞满链接（或者让访问者满眼都是链接），变得越来越难了。为了更好地导航一个站点，很多Web设计师使用下拉式菜单系统来隐藏链接，直到人们要求这些链接出现（参见图8-3所示）。而这些都是针对这一问题只使用CSS的解决方法，并且，这些方法并不总是很理想的。首先，只使用CSS的弹出菜单不稳定，如果你仅仅在菜单上离开一秒，菜单就会消失。此外，CSS不允许你添加任何视觉效果，例如将菜单淡入到视野，或者令其以动画的形式出现在该位置。
图 8-3 导航一个充满了很多页面和部分的菜单，可能很容易令人混淆。带有下拉菜单的导航栏是简化站点链接显示的一种优雅方法。它允许你包含众多的导航选项，并且减少页面的杂乱程度
幸运的是，只需要一点点JavaScript代码，你就可以创建一个动画的菜单系统，而且它可以在访问者使用的所有浏览器中正常工作。这个导航菜单更大程度上依赖于HTML和CSS，而不是我们目前在本书中所学习到的JavaScript技术。你将使用HTML来创建一个嵌套的链接集合以及CSS，这些CSS用来将那些链接格式化成一个导航栏一样，并且用来定位和隐藏任何子菜单。然后，我们将添加一些JavaScript来把菜单的显示动画成为鼠标光标划过导航栏按钮的样子。
8.5.1 HTML
针对导航菜单的HTML是使用＜ul＞标签创建的一个简单的项目列表。每一个顶级的＜li＞标签表示导航栏上的主要按钮。要创建一个子菜单，在该菜单所属的＜li＞标签中添加一个＜ul＞标签。例如，图8-3中的菜单的HTML如下所示：
＜ul id="navigation"＞
＜li＞＜a href="#"＞Home＜/a＞＜/li＞
＜li＞＜a href="#"＞About Us＜/a＞
＜ul＞
＜li＞＜a href="#"＞Our History＜/a＞＜/li＞
＜li＞＜a href="#"＞Driving Directions＜/a＞＜/li＞
＜li＞＜a href="#"＞Hours＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞Our Products＜/a＞
＜ul＞
＜li＞＜a href="#"＞Gizmos＜/a＞
＜ul＞
＜li＞＜a href="#"＞Gizmo Basic＜/a＞＜/li＞
＜li＞＜a href="#"＞Gizmo Standard＜/a＞＜/li＞
＜li＞＜a href="#"＞Gizmo Supreme＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞Gadgets＜/a＞
＜ul＞
＜li＞＜a href="#"＞Gadget Basic＜/a＞＜/li＞
＜li＞＜a href="#"＞Gadget Standard＜/a＞＜/li＞
＜li＞＜a href="#"＞Gadget Supreme＜/a＞
＜ul＞
＜li＞＜a href="#"＞Gadget Supreme A＜/a＞＜/li＞
＜li＞＜a href="#"＞Gadget Supreme B＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞Time Machines＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞
注意：为了让这个示例显得简单，这段HTML使用一个#符号来替代每个＜a＞标签的href属性的一个实际的URL，例如＜a href="#"＞。在一个实际的导航栏中，每个＜a＞标签都指向一个真正的Web页面，诸如＜a href="products/gadgets/basic.html"＞。
三个主要的导航按钮是Home、About Us和Our Products。About Us之下是一个菜单，由包含了Our History、Driving Directions和Hours选项的一个嵌套列表来表示。Our Products按钮包含了带有Gizmo、Gadget和Time Machines选项的另一个菜单。Gizmo和Gadgets都拥有其自己的菜单（两个其他的嵌套列表），并且，在Gadget菜单之下的Gadget Supreme选项之下，还有两个其他的选项（也是另一个嵌套的列表）。嵌套的列表只不过是有意包含更多的一个层级的另一个列表。从视觉上看，上面的HTML可以产生如下所示的一个列表：
·Home
·About Us
·Our History
·Driving Directions
·Hours
·Our Products
·Gizmos
·Gizmo Basic
·Gizmo Standard
·Gizmo Supreme
·Gadgets
·Gadget Basic
·Gadget Standard
·Gadget Supreme
·Gadget Supreme A
·Gadget Supreme B
·Tim e Machines
记住，嵌套的列表放在其父项的＜l i＞标签之中。例如，＜u l＞标签包含了项目Gizmos、Gadgets和Time Machines的一个列表，该列表包含在用于Products列表项的＜li＞标签之中（如果你需要回顾一下创建HTML列表的支持，请查看www.htmldog.com/guides/htmlbeginner/lists/）。
注意：确保顶级的链接（在这个例子中是Home、About Us和Our Products）总是指向这样一个列表，该页面链接到其部分中的一个子页面（例如，About Us下面的Our History、Driving Directions和Hours链接）。通过这种方式，如果浏览器没有打开JavaScript，它仍然可以访问子菜单中的链接。
