"Responsive Navigation Menu"
Bootstrap 3.2.0 Snippet by follypimpz

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src ="http://code.jquery.com/jquery-1.9.1.js"></script> <script src ="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src ="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script> <script src ="http://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script> <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"> <link href="http://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css" rel="stylesheet"> <link href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" rel="stylesheet"> <div class="nav-side-menu"> <div class="brand">Brand Logo</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#customers" class="collapsed active"> <a href="#"><i class="fa fa-users fa-lg"></i> Customers <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="customers"> <li class="active"><a href="#">New Customer</a></li> </ul> <li data-toggle="collapse" data-target="#suppliers" class="collapsed"> <a href="#"><i class="fa fa-truck fa-lg"></i> Suppliers <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="suppliers"> <li class="active"><a href="#">New Supplier</a></li> </ul> <li data-toggle="collapse" data-target="#employees" class="collapsed"> <a href="#"><i class="fa fa-user fa-lg"></i> Employees <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="employees"> <li class="active"><a href="#">New Employee</a></li> </ul> <li data-toggle="collapse" data-target="#stock" class="collapsed"> <a href="#"><i class="fa fa-cubes fa-lg"></i> Manage Stock <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="stock"> <li class="active">New Vehicle</li> </ul> <li data-toggle="collapse" data-target="#order" class="collapsed"> <a href="#"><i class="fa fa-shopping-cart fa-lg"></i> Manage Orders <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="order"> <li class="active">New Order</li> </ul> <li data-toggle="collapse" data-target="#report" class="collapsed"> <a href="#"><i class="fa fa-bar-chart fa-lg"></i> Reports <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="report"> <li class="active">New Report</li> </ul> <li> <a href="#"> <i class="fa fa-cogs fa-lg"></i> Profile Settings </a> </li> <li> <a href="#"> <i class="fa fa-sign-out fa-lg"></i> Log out </a> </li> </ul> </div> </div> <div class="main-content"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Username</th> <th>Full Name</th> <th>Email</th> <th>Access Rights</th> <th>Actions</th> </tr> </thead> <tfoot> <tr> <th>Username</th> <th>Full Name</th> <th>Email</th> <th>Access Rights</th> <th>Actions</th> </tr> </tfoot> <tbody> <tr> <td>TigerNixon90</td> <td>Tiger Nixon</td> <td>tnixon@gmail.com</td> <td><font color="red">Partial</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>TigerNixon90</td> <td>Ash Strong</td> <td>tnixon@gmail.com</td> <td><font color="red">Partial</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>TigerNixon90</td> <td>Smith Connor</td> <td>tnixon@gmail.com</td> <td><font color="red">Partial</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>dummydata90</td> <td>Jo Downing</td> <td>tnixon@gmail.com</td> <td><font color="green">Full</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>TigerNixon90</td> <td>Mo Deloitte</td> <td>tnixon@gmail.com</td> <td><font color="red">Partial</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>TigerNixon90</td> <td>Keanu Reeves</td> <td>tnixon@gmail.com</td> <td><font color="red">Partial</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> <tr> <td>TigerNixon90</td> <td>Ty Beckford</td> <td>tnixon@gmail.com</td> <td><font color="green">Full</font></td> <td> <table> <tr> <td> <a class="btn btn-primary btn-circle" href="#" role="button"><i class="fa fa-pencil-square-o"></i></a> <a class="btn btn-info btn-circle" href="#" role="button"><i class="fa fa-key"></i></a> <a class="btn btn-danger btn-circle" href="#" role="button"><i class="fa fa-trash-o"></i></a> </td> </tr> </table> </td> </tr> </tr> </tbody> </table> </div>
.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; } .main-content { font-family: Arial, Helvetica, sans-serif; max-width: 65%; padding-top: 40px; margin: 0 0 40px 340px; } table th:nth-child(3), td:nth-child(3) { display: none; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; }
$(document).ready(function () { $('#example').DataTable({ dom: 'T<"clear">lfrtip<"clear spacer">T', responsive: true, tableTools: { "aButtons": ["xls", "pdf","print"] } }); });

Questions / Comments: