手工打造极酷的分离式滑动门导航菜单
作者：冰极峰 来源：冰极峰blog 发布时间：2009-05-25 20:11:00
导言：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。本菜单无冗余结构，利于数据动态输出，非常适合于用在平常的项目中去。本教程中讲到了基本的滑动门原理，相信对那些还在这条路上摸索的朋友会有一些帮助！当然如果有什么错误和问题，也欢迎大家提出来探讨。
本导航菜单想达到的理想目标是：
1.漂亮，有个性。
2.结构清晰，语义明确，无冗余标签。
3.表现、结构、行为三层分离，无侵入式。
4.有利于后台程序的数据输出。
5.菜单有三态效果的变化。
6.能高亮记录点击后的菜单项。
7.自适应文字的宽度。当文字内容长短变化时按钮能适时变化。
8.兼容各大主流浏览器。
让我们一步一步的实现这种理想的菜单吧！
在论坛中经常看到很多朋友在制作菜单，但说实话，不是结构冗余，就是有形无神，或有神无貌。而我们现在要打造的就是极品菜单。无论您是新手或老手，在这个教程中都应该有所收获。
一个理想的菜单其结构应该是干净的、无冗余、分离的，然而因为种种的原因，会为它加上许多无意义的东西，到最后，会离“干净”越来越远。所以在做菜单前，有些原则是在整个制作过程一直要牢记的，不能以任何外力所阻扰。
结构篇
在我的印象中，理想的标准菜单应该具有下面的结构：
<div id="nav">
<ul id="menu">
<li><a href="#none" title="博客园">博客园</a></li>
<li><a href="#none" title="社区">社区</a></li>
<li><a href="#none" title="首页">首页</a></li>
<li><a href="#none" title="新随笔">新随笔</a></li>
<li><a href="#none" title="联系">联系</a></li>
<li><a href="#none" title="管理">管理</a></li>
<li><a href="#none" title="订阅">订阅</a></li>
<li><a href="#none" title="冰极峰">冰极峰</a></li>
</ul>
</div>
菜单的最原始的结构有了，可以看到这里面是没有任何无意义的标签，每个标签都有各自的语义。我们在浏览器中看下，啊哦，确实很简陋，就是原始的文字，像什么，嗯，就像我们在菜馆里点菜用的菜单，可能比那个还简单，并且每个菜单前面还有一个小圆点！哦，天啦，离我们的漂亮菜单还差好大一截呢！
0
投稿猜你喜欢
- 近日在学习C++，看到函数指针，由于之前一直搞ASP，所以想ASP里面是否也有这个函数指针的东西，于是翻了翻VBScript手册，没让我失望
目前网络上有许多图片验证码形式，那些没有生成图片的验证码的抗破解防御能力简直不堪一击；有人直接在网页源码里显示出具体的数字，然后要求访问者输- 由于可将 Microsoft? SQL Server? 2000 设置为包含一个或多个命名实例和一个默认实例（也可无），所以要用新命名规则来
- ASP错误大全 Microsoft VBScript语法错误(0x800A03E9)--＞内存不足 Microsoft VBScript语法
- [参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ][操作系统：Windows
- 在用户体验这个行业，经常会听到，可用性，可访问性这样专业的名词，但是，事实上在很多产品实现过程里都忽略了这一点！WHY？举个很简单的例子，用
- 代码如下:<％ function CheckFileContent(FileName) dim
- 发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS
- 方法一：利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端，所以可以根据Cookies保存的IsVoted的值来判断
- 处理页面中的间歇无缝滚动新闻的时候，最常见的方法就是将滚动区内容复制追加一份，然后通过控制和判断滚动块的scrollTop来实现滚动停止效果
- 上期回顾:亚马逊购物用户体验分析 (二)方便的导航元素任何网上商店的成功，至关重要的一点，就是用户可以简单轻松地使用导航条。基本店铺分类，用
- Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰
- 我们经常会遇到这样的问题你还在为你的MySQL命令模式下，前面的提示信息还是：mysql>，那么我们如何更改mysql命令下提示信息呢
- Mysql Explain 详解一.语法explain < table_name >例如: explain select * f
- 在Windows vista之前的微软操作系统的地址栏与浏览器的地址栏是一样的，也是面包屑般的自上而下的线性等级形，如果想从D盘跳到C盘是不
- 使用timer来统计asp页面程序的运行时间。实例代码和说明见下：<％Dim varInitial_TimevarIniti
- 如何使DIV居中,div垂直居中,div水平居中.这个问题在用CSS来设计网页的时候经常会遇到，如果用传统的表格来布局是很简单的，CSS里就
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 可在图片连接后面加上宽和高，如：width="150" height="50"<h
- Access SQL 函数 收藏 ▲日期/时间CDate 将字符串转化成为日期 select CDate("2005/
