https://blog.csdn.net/kebi007/article/details/76038251 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <style> /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper { -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; padding-left: 0; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 220px; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #wrapper.toggled #page-content-wrapper { margin-right: -220px; position: absolute; } #sidebar-wrapper { -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #1a1a1a; height: 100%; left: 220px; margin-left: -220px; overflow-x: hidden; overflow-y: auto; transition: all 0.5s ease; width: 0; z-index: 1000; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #page-content-wrapper { padding-top: 10px; width: 100%; } </style> </head> <body> <div id="wrapper"> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> </nav> <div id="page-content-wrapper"> <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">點這裏</button> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> </div> </div> <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript"> $('[data-toggle="offcanvas"]').click(function () { $('#wrapper').toggleClass('toggled'); }); </script> </body> </html>
bootstrap側邊導航欄的實現
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.