CSS自定义导航栏悬浮(三种实现方式)

html-css026

CSS自定义导航栏悬浮(三种实现方式),第1张

提供三种自定义导航栏悬浮的方法

在自定义组件中设定css 样式:

利用 position: fixed

利用 position: fixed

1、正常布局网站,导航栏也正常布局。

2、自定义导航栏制作(可复制原来的导航栏,也可以另制作一份),绝对定位,隐藏。

3、在页面scroll事件中进行判断,滚动到指定像素位置,自定义的导航栏出现,并且随着scroll事件对top值不断更新,一句jquery的scrollTop。

4、如果向上回滚,判断scrollTop值,隐藏自定义导航栏。

1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。

2、在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。

3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏。

4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化。

5、也可以制作成水平导航栏,overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏,float: left使导航栏水平显示。

6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,已经置顶了。