微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

1、效果图  

 

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

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

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

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

2、css代码

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

rush:css;">

3、HTML代码   

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

rush:xhtml;">

4、js代码  

 

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

rush:js;">

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐