sidebar.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  5. <style>
  6. .nav-pills > li > a {
  7. border-radius: 0;
  8. }
  9. #wrapper {
  10. padding-left: 0;
  11. -webkit-transition: all 0.5s ease;
  12. -moz-transition: all 0.5s ease;
  13. -o-transition: all 0.5s ease;
  14. transition: all 0.5s ease;
  15. overflow: hidden;
  16. }
  17. #wrapper.toggled {
  18. padding-left: 250px;
  19. overflow: hidden;
  20. }
  21. #sidebar-wrapper {
  22. z-index: 1000;
  23. position: absolute;
  24. left: 250px;
  25. width: 0;
  26. height: 100%;
  27. margin-left: -250px;
  28. overflow-y: auto;
  29. background: #000;
  30. -webkit-transition: all 0.5s ease;
  31. -moz-transition: all 0.5s ease;
  32. -o-transition: all 0.5s ease;
  33. transition: all 0.5s ease;
  34. }
  35. #wrapper.toggled #sidebar-wrapper {
  36. width: 250px;
  37. }
  38. #page-content-wrapper {
  39. position: absolute;
  40. padding: 15px;
  41. width: 100%;
  42. overflow-x: hidden;
  43. }
  44. .xyz {
  45. min-width: 360px;
  46. }
  47. #wrapper.toggled #page-content-wrapper {
  48. position: relative;
  49. margin-right: 0px;
  50. }
  51. .fixed-brand {
  52. width: auto;
  53. }
  54. /* Sidebar Styles */
  55. .sidebar-nav {
  56. position: absolute;
  57. top: 0;
  58. width: 250px;
  59. margin: 0;
  60. padding: 0;
  61. list-style: none;
  62. margin-top: 2px;
  63. }
  64. .sidebar-nav li {
  65. text-indent: 15px;
  66. line-height: 40px;
  67. }
  68. .sidebar-nav li a {
  69. display: block;
  70. text-decoration: none;
  71. color: #999999;
  72. }
  73. .sidebar-nav li a:hover {
  74. text-decoration: none;
  75. color: #fff;
  76. background: rgba(255, 255, 255, 0.2);
  77. border-left: red 2px solid;
  78. }
  79. .sidebar-nav li a:active,
  80. .sidebar-nav li a:focus {
  81. text-decoration: none;
  82. }
  83. .sidebar-nav > .sidebar-brand {
  84. height: 65px;
  85. font-size: 18px;
  86. line-height: 60px;
  87. }
  88. .sidebar-nav > .sidebar-brand a {
  89. color: #999999;
  90. }
  91. .sidebar-nav > .sidebar-brand a:hover {
  92. color: #fff;
  93. background: none;
  94. }
  95. .no-margin {
  96. margin: 0;
  97. }
  98. @media (min-width: 768px) {
  99. #wrapper {
  100. padding-left: 250px;
  101. }
  102. .fixed-brand {
  103. width: 250px;
  104. }
  105. #wrapper.toggled {
  106. padding-left: 0;
  107. }
  108. #sidebar-wrapper {
  109. width: 250px;
  110. }
  111. #wrapper.toggled #sidebar-wrapper {
  112. width: 250px;
  113. }
  114. #wrapper.toggled-2 #sidebar-wrapper {
  115. width: 50px;
  116. }
  117. #wrapper.toggled-2 #sidebar-wrapper:hover {
  118. width: 250px;
  119. }
  120. #page-content-wrapper {
  121. padding: 20px;
  122. position: relative;
  123. -webkit-transition: all 0.5s ease;
  124. -moz-transition: all 0.5s ease;
  125. -o-transition: all 0.5s ease;
  126. transition: all 0.5s ease;
  127. }
  128. #wrapper.toggled #page-content-wrapper {
  129. position: relative;
  130. margin-right: 0;
  131. padding-left: 250px;
  132. }
  133. #wrapper.toggled-2 #page-content-wrapper {
  134. position: relative;
  135. margin-right: 0;
  136. margin-left: -200px;
  137. -webkit-transition: all 0.5s ease;
  138. -moz-transition: all 0.5s ease;
  139. -o-transition: all 0.5s ease;
  140. transition: all 0.5s ease;
  141. width: auto;
  142. }
  143. }
  144. </style>
  145. </head>
  146. <body>
  147. <nav class="navbar navbar-default no-margin">
  148. <!-- Brand and toggle get grouped for better mobile display -->
  149. <div class="navbar-header fixed-brand">
  150. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
  151. <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
  152. </button>
  153. <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> M-33</a>
  154. </div>
  155. <!-- navbar-header-->
  156. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  157. <ul class="nav navbar-nav">
  158. <li class="active">
  159. <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
  160. </button>
  161. </li>
  162. </ul>
  163. </div>
  164. <!-- bs-example-navbar-collapse-1 -->
  165. </nav>
  166. <div id="wrapper">
  167. <!-- Sidebar -->
  168. <div id="sidebar-wrapper">
  169. <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
  170. <li class="active">
  171. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
  172. <ul class="nav-pills nav-stacked" style="list-style-type:none;">
  173. <li><a href="#">link1</a></li>
  174. <li><a href="#">link2</a></li>
  175. </ul>
  176. </li>
  177. <li>
  178. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Shortcut</a>
  179. <ul class="nav-pills nav-stacked" style="list-style-type:none;">
  180. <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
  181. <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>
  182. </ul>
  183. </li>
  184. <li>
  185. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
  186. </li>
  187. <li>
  188. <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
  189. </li>
  190. <li>
  191. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
  192. </li>
  193. <li>
  194. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
  195. </li>
  196. <li>
  197. <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
  198. </li>
  199. </ul>
  200. </div>
  201. <!-- /#sidebar-wrapper -->
  202. <!-- Page Content -->
  203. <div id="page-content-wrapper">
  204. <div class="container-fluid xyz">
  205. <div class="row">
  206. <div class="col-lg-12">
  207. <h1>Simple Admin Sidebar With Bootstrap by <a href="http://http://codepen.io/hughbalboa/">@hughbalboa</a></h1>
  208. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident laudantium nobis cum dignissimos ex inventore, velit blanditiis. Quod laborum soluta quidem culpa officia eligendi, quam, recusandae iste aliquid amet odit! </p>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <!-- /#page-content-wrapper -->
  214. </div>
  215. <!-- /#wrapper -->
  216. <!-- jQuery -->
  217. </body>
  218. </html>
  219. </html>