手风琴导航

开发工具与关键技术：手风琴导航
作者：李波

手风琴式导航适合应用诸多场景，其隐藏式的风琴导航，体积小，不常用的时候可以隐藏起来，既不影响网页布局，可以起到很好的导航作用。下面我们来试着制作它，首先为了能点击跳转选择a标签，em标签把文本定义为强调的内容，so我在em标签内嵌入文字，突出显示。
Css部分设置如下，给风琴导航部分设置其样式，用position:fixed固定其位置，cursor:pointer.。可使鼠标指示效果变成手指状态，让用户明确这里可以点击跳转。再设置动画效果，鼠标移入弹出
text-decoration: none;对文本设置
display: block;/转换行内块级元素/
transition-delay: 0.05s;设置动画时间
text-decoration: none;去掉a标签的下划线，因为难看，强迫症发作
#
这里的0.05是指时间。每一个a标签的一移动时间不同，也就是时间差让它有动态的效果。如果时间设置都是一个相同的值的话，会让人看着生硬，毫无动态的

.rightNav a:nth-of-type(1){
	transition-delay: 0.05s;//
}

其效果，当鼠标移入导航区域的的时候，它会像风琴导航一样展开。
效果如下图

新人发贴，如有不对，还请指正