jquery+css实现侧边导航栏效果

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期。与其修改别人的代码,不如自己来写一个了。废话不多说先上图,感兴趣的请继续看下去。

1、效果图   

jquery+css实现侧边导航栏效果_第1张图片

当有顶部导航栏的时候侧边导航栏会消失。

jquery+css实现侧边导航栏效果_第2张图片

响应式方面,同样的顶部导航栏消失后右下角的图标才出现。点击出现导航,选中后消失;

这里是个demo ,没有做平滑滚动,需要的可以自己加上。

大体就介绍这么多吧,下面上代码。

2、css代码

这里是css代码,详情请看注释


3、html代码      

这里是html代码,很简单没什么好说的。






4、js代码   

下面我们看下js代码。注释很详细,就不多说了。



今天的分享就到这里了,大家有什么意见尽管提,希望能对大家有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(jquery+css实现侧边导航栏效果)