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

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

1、效果图  

 

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

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

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

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

2、css代码

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

rush:css;">

3、HTML代码   

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

rush:xhtml;">

4、js代码  

 

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

rush:js;">

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

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...