自己写一个侧边导航栏组件
时间：2023-03-31 12:04:42
CSS
github仓库地址：https://github.com/meidongwei...在现在这个大移动时代，我们写的网页越来越注重移动端的适配phones，受益于CSS3媒体查询，我在工作中也有这样的需求。为了对移动端友好，当然想到了响应式设计。今天说的侧边导航栏组件就是其中之一。移动端会隐藏侧边导航栏，显示一个触发按钮。单击该按钮打开侧边导航栏，然后单击将其关闭。其实这个效果实现起来很简单。我们可以用css来控制侧边导航栏的位置，让它左：-x（负值会控制侧边导航蓝色在屏幕外），然后点击按钮touchleft：x（让它返回到screen)，就这么简单~这个demo改自bootstrap样式模板html：侧边导航
MainContent
css:.row-offcanvas,{position:relative;过渡：所有0.25s缓出；左：0；}.sidebar-offcanvas{位置：绝对；顶部：0；左：-50%；}.row-offcanvas.active{左：50%；}js:(js使用jQuery简化代码)$(document).ready(function(){$('[data-toggle="offcanvas"]').click(function(){$('.sidebar-offcanvas').toggleClass('active');});});根据这个思路，我们可以扩展这个组件，使其可以从左侧向外或者从右侧向外，或者从上往下看，希望对大家有所帮助！
