手工打造极酷的分离式滑动门导航菜单
作者:冰极峰 来源:冰极峰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>
菜单的最原始的结构有了,可以看到这里面是没有任何无意义的标签,每个标签都有各自的语义。我们在浏览器中看下,啊哦,确实很简陋,就是原始的文字,像什么,嗯,就像我们在菜馆里点菜用的菜单,可能比那个还简单,并且每个菜单前面还有一个小圆点!哦,天啦,离我们的漂亮菜单还差好大一截呢!


猜你喜欢
- 由于CPython实现中的GIL的限制,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大
- MySQL安装与配置1、所用MySQL的版本为:MySQL_5_1_26.msi;2、下载好软件后双击进入以下界面: 3、点击Ne
- 二维离散傅里叶变换(DFT)对于二维图像处理,通常使用 x , y x, yx,y 表示离散的空间域坐标变量,用 u , v u,vu,v
- 目录1. 双向循环的练习2. break_pass_continue的使用3. for循环小提示:4. 小练习问题:答案:总结1. 双向循环
- python链表的反转反转链表给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。输入:head = [1,2,3,4,5]输
- 做开发中难免时间类型之间的转换, 最近就发现前端js和后端django经常要用到这个转换, 其中jsDate.now()精确到毫秒,而Pyt
- 本文介绍了深入理解ES6中let和闭包,分享给大家,具体如下:在开始本文之前我们先来看一段代码for(var i=0;i<10;i++
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&
- 二进制转字符串入口参数:字节流函数返回:字符串Code By:Madpolice利用 ADODB.Stream 对象,速度比原来
- 目录安装模块XlsxWriter 示例合并Excel数据表头都一样的 excel表头都不一样的 excel表头都不一样的 excel安装模块
- 问题:最新在爬取某站点的时候,发现在post请求当中,参数构造正确却获取不到数据,索性将post的参数urlencode之后放到post请求
- 用django框架来做一些后台管理的web页面简直太方便了,django自带模块级的权限系统,用来做一些内部的系统非常合适,可以大大的减少开
- 前言InnoDB采用按表空间(tablespace)的方式进行存储数据, 默认配置情况下会有一个初始大小为10MB, 名字为ibdata1的
- 本文实例讲述了python图像处理之反色实现方法。分享给大家供大家参考。具体如下:我们先加载一个8位灰度图像每一个像素对应的灰度值从0-25
- 如下所示:# -*- coding=utf-8 -*- import urllib2import socketimport timeurls
- 文件下载1.通过a标签点击直接下载<a href="https:xxx.xlsx" rel="exter
- 完整性约束是对字段进行限制,从而符合该字段达到我们期望的效果比如字段含有默认值,不能是NULL等 直观点说:如果插入的数据不满足限制要求,数
- 因为前端课要交一个大作业,刚好工作室的项目需要一个后台管理界面,就自学了一下vue,今天做了一个选项卡切换,最开始的作为菜鸡是用的js做的,
- 一、报错: 「Can't swap PDO instance while within transaction」通过查询 Larav
- 这篇文章主要介绍了python基于celery实现异步任务周期任务定时任务,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参