CSS伸缩导航效果讲解

先看案例效果演示:

CSS伸缩导航效果讲解_第1张图片

这个也是很简单和常见的侧边栏效果,基础布局一样只需要一个div 加下面的a标记,点击跳转就可以了。这里是一个效果所以链接给一个# 不用跳转就可以了,这个是基础的html 布局部分:

CSS伸缩导航效果讲解_第2张图片

这个里有一个操作就是点击,通常点击是用JS 来做,而CSS3 也和可以点击效果的,通过input 和 label绑定就可以了。

CSS伸缩导航效果讲解_第3张图片

这里注释都写好了,看着这个代码多写多敲几遍 基本都没有多少问题了,点击的实现靠的是 :checked这个属性,同时适当的用 CSS3得分选择器,就简单许多了。

CSS伸缩导航效果讲解_第4张图片

你可能感兴趣的:(CSS伸缩导航效果讲解)