【CSS】纯css导航条nav(不用Bootstrap也能写出好看的导航)

原创 amandakelake 随笔 HTML+CSS 499阅读 2017-05-07 21:05:32 举报

参考学习了一些大神们的写法,再认真理解了CSS3的transform和transition属性,不用依靠Bootstrap也能写出不错的导航条
在线连接:
导航条nav

【CSS】纯css导航条nav(不用Bootstrap也能写出好看的导航)

【CSS】纯css导航条nav(不用Bootstrap也能写出好看的导航)

挑几个重要的地方讲讲思路,同时也是自己的再学习,只要你有html和css3的基础,加点耐心应该都能看懂
首先要学习几个重要概念,请自行google
1、伪类:hover,:before,:after的使用方法
2、transform-origin,变形原点;tranform: perspective,透视距离
3、transition(过渡):效果名称 时长 转速曲线 延迟时长
4、关键:正常状态下菜单的透明度为0,鼠标滑过或者活动状态时,伪类发生变化,或者透明度变为正常,高度不再为0
5、用border进行三角形或者箭头arrow的制作
6、 less或者sass,我的css使用less写的,其实就是一些css样式的缩写,不难理解
7、可直接对照着github上的代码来看,用less写的很难一段一段粘贴上来

一、折叠式下拉菜单collapse-navbar
html 代码

1、首先是菜单盒子要相对定位,毕竟下面的子菜单要根据它来进行绝对定位
css 代码

2、li元素子菜单的初始状态是透明度为0 高度为0
css 代码

3、子菜单的初始变形和透视距离,方便后面下滑出来的效果
css 代码

4、鼠标滑过时,透明度、高度、变形状态都开始变化,并且用transition设置动画缓慢的效果
css 代码

二、收缩式下拉菜单shrink-navbar
javascript 代码

1、鼠标滑过主菜单或者处于active状态时,下面的横条是通过伪类增加的
css 代码

2、下拉子菜单也是同理,通过透明度和高度进行设置

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复