一个基于jQuery/Bootstrap的响应式、多层次、SEO友好、移动兼容、非画布侧边栏导航,用于仪表板、管理面板和web应用程序设计。
1.在Bootstrap 4项目中加载所需的资源。
<!-- Stylesheet --> <link rel="stylesheet" href="/path/to/bootstrap.css"> <link rel="stylesheet" href="/path/to/fontawesome/all.css"> <link rel="stylesheet" href="/path/to/perfect-scrollbar.css"> <!-- JavaScript --> <script src="/path/to/jquery.js"></script> <script src="/path/to/bootstrap.bundle.js"></script> <script src="/path/to/perfect-scrollbar.js"></script> <script src="/path/to/nanobar.js"></script>
3.在文档中加载边栏菜单的文件。
<link rel="stylesheet" href="dist/css/sidebar.css"> <script src="dist/js/sidebar.menu.js"></script>
4.为侧边栏菜单创建HTML。就是这样。
<!-- sidebar --> <nav role="navigation" class="sidebar sidebar-light rounded-0"> <!-- sidebar menu --> <div class="sidebar-menu"> <!-- menu --> <ul class="list list-unstyled list-scrollbar"> <!-- simple menu --> <li class="list-item"> <!-- list title --> <p class="list-title text-uppercase">Translate</p> <!-- list items --> <ul class="list-unstyled"> <li><a href="#" class="list-link">Czech</a></li> <li><a href="#" class="list-link link-current">English</a></li> </ul> </li> <!-- multi-level dropdown menu --> <li class="list-item"> <!-- list title --> <p class="list-title text-uppercase">Dashboard</p> <!-- list items, first level --> <ul class="list-unstyled"> <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-home"></i></span>Home</a></li> <li><a href="#" class="list-link link-arrow link-current"><span class="list-icon"><i class="fas fa-tools"></i></span>Settings</a> <!-- list items, second level --> <ul class="list-unstyled list-hidden"> <li><a href="#" class="list-link">Timezone</a></li> <li><a href="#" class="list-link link-current">Permissions</a></li> <li><a href="#" class="list-link link-arrow">Maintenance</a> <!-- list items, third level --> <ul class="list-unstyled list-hidden"> <li><a href="#" class="list-link">On</a></li> <li><a href="#" class="list-link">Off</a></li> </ul> </li> </ul> </li> <!-- notice info --> <li> <a href="#" class="list-link"> <div class="clearfix"> <div class="float-left"><span class="list-icon"><i class="fas fa-bell"></i></span>Notice</div> <div class="float-right"> <span class="badge badge-danger">New</span> <span class="badge badge-secondary">4</span> </div> </div> </a> </li> </ul> </li> <!-- multi-level dropdown menu --> <li class="list-item"> <!-- list title --> <p class="list-title text-uppercase">Coments</p> <!-- list items, first level --> <ul class="list-unstyled"> <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>New</a></li> <li><a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fas fa-comment"></i></span>Settings comments</a> <!-- list items, second level --> <ul class="list-unstyled list-hidden"> <li><a href="#" class="list-link">Disable</a></li> <li><a href="#" class="list-link">Enable</a></li> </ul> </li> </ul> </li> <!-- simple menu --> <li class="list-item"> <!-- list title --> <p class="list-title text-uppercase">Blog</p> <!-- list items --> <ul class="list-unstyled"> <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>Add</a></li> <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-table"></i></span>List</a></li> </ul> </li> </ul> </div> </nav>
5.要使用“黑暗”主题,只需替换侧边栏灯
具有侧边栏深色
<nav role="navigation" class="sidebar sidebar-light rounded-0"> ... </nav>
2023-02-08
2023-01-27
2022-03-08
2021-08-20
2021-08-19
2021-05-12
2021-03-25
2020-10-09
2020-10-08
2020-10-07
2020-06-30
2020-05-20
2020-01-17