123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <html>
- <head>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <style>
-
- .nav-pills > li > a {
- border-radius: 0;
- }
- #wrapper {
- padding-left: 0;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- overflow: hidden;
- }
- #wrapper.toggled {
- padding-left: 250px;
- overflow: hidden;
- }
- #sidebar-wrapper {
- z-index: 1000;
- position: absolute;
- left: 250px;
- width: 0;
- height: 100%;
- margin-left: -250px;
- overflow-y: auto;
- background: #000;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- #wrapper.toggled #sidebar-wrapper {
- width: 250px;
- }
- #page-content-wrapper {
- position: absolute;
- padding: 15px;
- width: 100%;
- overflow-x: hidden;
- }
- .xyz {
- min-width: 360px;
- }
- #wrapper.toggled #page-content-wrapper {
- position: relative;
- margin-right: 0px;
- }
- .fixed-brand {
- width: auto;
- }
- /* Sidebar Styles */
- .sidebar-nav {
- position: absolute;
- top: 0;
- width: 250px;
- margin: 0;
- padding: 0;
- list-style: none;
- margin-top: 2px;
- }
- .sidebar-nav li {
- text-indent: 15px;
- line-height: 40px;
- }
- .sidebar-nav li a {
- display: block;
- text-decoration: none;
- color: #999999;
- }
- .sidebar-nav li a:hover {
- text-decoration: none;
- color: #fff;
- background: rgba(255, 255, 255, 0.2);
- border-left: red 2px solid;
- }
- .sidebar-nav li a:active,
- .sidebar-nav li a:focus {
- text-decoration: none;
- }
- .sidebar-nav > .sidebar-brand {
- height: 65px;
- font-size: 18px;
- line-height: 60px;
- }
- .sidebar-nav > .sidebar-brand a {
- color: #999999;
- }
- .sidebar-nav > .sidebar-brand a:hover {
- color: #fff;
- background: none;
- }
- .no-margin {
- margin: 0;
- }
- @media (min-width: 768px) {
- #wrapper {
- padding-left: 250px;
- }
- .fixed-brand {
- width: 250px;
- }
- #wrapper.toggled {
- padding-left: 0;
- }
- #sidebar-wrapper {
- width: 250px;
- }
- #wrapper.toggled #sidebar-wrapper {
- width: 250px;
- }
- #wrapper.toggled-2 #sidebar-wrapper {
- width: 50px;
- }
- #wrapper.toggled-2 #sidebar-wrapper:hover {
- width: 250px;
- }
- #page-content-wrapper {
- padding: 20px;
- position: relative;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- }
- #wrapper.toggled #page-content-wrapper {
- position: relative;
- margin-right: 0;
- padding-left: 250px;
- }
- #wrapper.toggled-2 #page-content-wrapper {
- position: relative;
- margin-right: 0;
- margin-left: -200px;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- width: auto;
- }
- }
- </style>
- </head>
-
- <body>
- <nav class="navbar navbar-default no-margin">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header fixed-brand">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
- <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
- </button>
- <a class="navbar-brand" href="#"><i class="fa fa-rocket fa-4"></i> M-33</a>
- </div>
- <!-- navbar-header-->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="active">
- <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
- </button>
- </li>
- </ul>
- </div>
- <!-- bs-example-navbar-collapse-1 -->
- </nav>
- <div id="wrapper">
- <!-- Sidebar -->
- <div id="sidebar-wrapper">
- <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
- <li class="active">
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
- <ul class="nav-pills nav-stacked" style="list-style-type:none;">
- <li><a href="#">link1</a></li>
- <li><a href="#">link2</a></li>
- </ul>
- </li>
- <li>
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Shortcut</a>
- <ul class="nav-pills nav-stacked" style="list-style-type:none;">
- <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a></li>
- <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a></li>
- </ul>
- </li>
- <li>
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
- </li>
- <li>
- <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
- </li>
- <li>
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
- </li>
- <li>
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
- </li>
- <li>
- <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
- </li>
- </ul>
- </div>
- <!-- /#sidebar-wrapper -->
- <!-- Page Content -->
- <div id="page-content-wrapper">
- <div class="container-fluid xyz">
- <div class="row">
- <div class="col-lg-12">
- <h1>Simple Admin Sidebar With Bootstrap by <a href="http://http://codepen.io/hughbalboa/">@hughbalboa</a></h1>
- <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>
- </div>
- </div>
- </div>
- </div>
- <!-- /#page-content-wrapper -->
- </div>
- <!-- /#wrapper -->
- <!-- jQuery -->
-
- </body>
-
- </html>
- </html>
|