最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期。与其修改别人的代码,不如自己来写一个了。废话不多说先上图,感兴趣的请继续看下去。
当有顶部导航栏的时候侧边导航栏会消失。
响应式方面,同样的顶部导航栏消失后右下角的图标才出现。点击出现导航,选中后消失;
这里是个demo ,没有做平滑滚动,需要的可以自己加上。
大体就介绍这么多吧,下面上代码。
2、css代码
这里是css代码,详情请看注释
rush:css;">
这里是HTML代码,很简单没什么好说的。
rush:xhtml;">
<nav class="cd-vertical-nav navbar collapse">
<section id="tab1">
<section id="tab2">
<section id="tab3">
<section id="tab4">
下面我们看下js代码。注释很详细,就不多说了。
rush:js;">
今天的分享就到这里了,大家有什么意见尽管提,希望能对大家有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。