CSS伸缩导航效果讲解

作者: WERH5知识分享 | 来源:发表于2017-07-24 21:05 被阅读18次

    先看案例效果演示:

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

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

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

    相关文章

      网友评论

        本文标题:CSS伸缩导航效果讲解

        本文链接:https://www.haomeiwen.com/subject/lrkikxtx.html