A Pen by Steve Halford on CodePen.
Last active
October 30, 2017 01:58
-
-
Save playwellsteve/560fc089e29012c05f7f01ee92ca878f to your computer and use it in GitHub Desktop.
rYNRqm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> | |
<ul class="navbar-nav mr-auto"> | |
<li class="nav-item active"> | |
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Link</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link disabled" href="#">Disabled</a> | |
</li> | |
<li class="nav-item dropdown"> | |
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> | |
<div class="dropdown-menu" aria-labelledby="dropdown01"> | |
<a class="dropdown-item" href="#">Action</a> | |
<a class="dropdown-item" href="#">Another action</a> | |
<a class="dropdown-item" href="#">Something else here</a> | |
</div> | |
</li> | |
</ul> | |
<form class="form-inline my-2 my-lg-0"> | |
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> | |
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | |
</form> | |
</div> | |
</nav> | |
<div id="app" class="container"> | |
<div :class="{toggled: showNav}" id="wrapper"> | |
<!-- Sidebar --> | |
<div id="sidebar-wrapper"> | |
<ul class="sidebar-nav"> | |
<li class="sidebar-brand"> | |
<a href="#"> | |
Start Bootstrap | |
</a> | |
</li> | |
<li> | |
<a href="#">Dashboard</a> | |
</li> | |
<li> | |
<a href="#">Shortcuts</a> | |
</li> | |
<li> | |
<a href="#">Overview</a> | |
</li> | |
<li> | |
<a href="#">Events</a> | |
</li> | |
<li> | |
<a href="#">About</a> | |
</li> | |
<li> | |
<a href="#">Services</a> | |
</li> | |
<li> | |
<a href="#">Contact</a> | |
</li> | |
</ul> | |
</div> | |
<!-- /#sidebar-wrapper --> | |
<!-- Page Content --> | |
<div id="page-content-wrapper"> | |
<div class="container-fluid"> | |
<h1>Simple Sidebar</h1> | |
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the | |
page content will be pushed off canvas.</p> | |
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> | |
<p>${ showNav }</p> | |
<button class="btn btn-secondary" id="menu-toggle" @click="toggleNav">Toggle Menu</button> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: "#app", | |
delimiters: ['${', '}'], | |
data: { | |
showNav: false | |
}, | |
methods: { | |
toggleNav() { | |
this.showNav= !this.showNav; | |
} | |
} | |
}) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
padding-top: 4.25rem; | |
overflow-x: hidden; | |
} | |
#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; | |
} | |
#wrapper.toggled { | |
padding-left: 250px; | |
} | |
#sidebar-wrapper { | |
z-index: 1000; | |
position: fixed; | |
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 { | |
width: 100%; | |
position: absolute; | |
padding: 15px; | |
} | |
#wrapper.toggled #page-content-wrapper { | |
position: absolute; | |
margin-right: -250px; | |
} | |
/* Sidebar Styles */ | |
.sidebar-nav { | |
position: absolute; | |
top: 0; | |
width: 250px; | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.sidebar-nav li { | |
text-indent: 20px; | |
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); | |
} | |
.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; | |
} | |
@media(min-width:768px) { | |
#wrapper { | |
padding-left: 0; | |
} | |
#wrapper.toggled { | |
padding-left: 250px; | |
} | |
#sidebar-wrapper { | |
width: 0; | |
} | |
#wrapper.toggled #sidebar-wrapper { | |
width: 250px; | |
} | |
#page-content-wrapper { | |
padding: 20px; | |
position: relative; | |
} | |
#wrapper.toggled #page-content-wrapper { | |
position: relative; | |
margin-right: 0; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment