<div id="st-container" class="st-container">
<!--
example menus
these menus will be on top of the push wrapper
-->
<nav class="st-menu st-effect-9" id="menu-9">
<h2>Login</h2>
<form method="post" name="loginform" onsubmit="return false;">
<ul>
<li><a href="#" onclick="return false;">
<input id="login_input_username" class="main-form login_input" type="text" name="user_name" placeholder="Username..."/>
</a></li>
<li><a href="#" onclick="return false;">
<input id="login_input_pass" class="login_input login_input_password main-form" type="password" name="user_password" placeholder="password"/>
</a></li>
<button type="submit" id="sub" name="login">Sign in</button>
<footer>
<input class="yolo" name="rememberMe" value="on" type="checkbox"/><span id="rememberme">Remember me</span>
<a id="register_acc" href="#"><span>Register new account</span></a>
<div class="status"></div>
</footer>
</ul>
</form>
</nav>
<!-- content push wrapper -->
<div class="st-pusher">
<!--
example menus
these menus will be under the push wrapper -->
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Top Navigation -->
<header class="codrops-header">
<h1>Awesome login page <span>Lorem ipsum dolor est cetera</span></h1>
<iframe style="margin: 0 auto;" width="900" height="415" src="//www.youtube.com/embed/TPh5Xewfd" frameborder="0" allowfullscreen></iframe>
</header>
<div class="main clearfix">
<div id="st-trigger-effects" class="column">
<button data-effect="st-effect-9">Do login!</button>
</div>
</div><!-- /main -->
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->.wrapper {
text-align:center;
width:100%;
}
.st-menu h1 {
color:#fff;
text-shadow:1px 1px 0px rgba(0, 0, 0, 0.3);
margin-bottom:20px;
}
.st-menu section {
margin:0 auto;
width:300px;
padding:20px;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
-moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
}
.st-menu form {
width: 300px;
}
.st-menu .main-form {
display:block;
width:280px;
height: 50px;
margin-bottom:15px;
padding:0px;
outline:none;
border:none;
background:rgba(225, 225, 225, 0.1);
font:0.7em 'Ubuntu';
color:#fff;
font-size: 14px;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.st-menu .main-form:focus {
background:#414141;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
color:#777;
}
.st-menu button {
border: none;
padding: 0.6em 1.2em;
background: #DC4B4B;
color: #fff;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 0 20px;
border-radius: 2px;
text-align; center;
}
.st-menu button:active {
box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.3);
}
.st-menu footer {
padding-top:20px;
text-align:right;
width:330px;
margin:0 auto;
}
.st-menu .yolo {
-webkit-appearance: none;
background:rgba(0, 0, 0, 0.4);
padding: 9px;
display: inline-block;
position: relative;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
float: left;
}
.st-menu .yolo:checked {
background-color: #fff;
color: #fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.st-menu .yolo:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #000;
}
.st-menu #rememberme {
display:inline-block;
position:relative;
bottom: 0;
left: 6px;
color:#fff;
font-weight:300;
font-size: 12px;
text-shadow:1px 1px 0px rgba(0, 0, 0 ,0.6);
float: left;
}
.st-menu #register_acc {
font-size: 12px;
margin-right: 35px;
position: relative;
top: -4px;
text-decoration: none;
color: #fff;
clear: both;
}
.status {
color: #DC4B4B;
}
.status p {
float: left;
}
/* css*/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
body {
background: #444;
color: #48a770;
font-weight: 300;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
a {
text-decoration: none;
color: #48a770;
outline: none;
}
a:hover, a:focus {
color: #2c774b;
outline: none;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.codrops-header,
.codrops-top {
font-family: 'Lato', Arial, sans-serif;
}
.codrops-header {
margin: 0 auto 3em;
padding: 3em;
text-align: center;
}
.codrops-header h1 {
margin: 0;
font-weight: 300;
font-size: 2.625em;
line-height: 1.3;
color: #DC4B4B;
}
.codrops-header span {
display: block;
padding: 0 0 0.6em 0.1em;
font-size: 60%;
color: #aca89a;
}
/* To Navigation Style */
.codrops-top {
width: 100%;
text-transform: uppercase;
font-size: 0.69em;
line-height: 2.2;
font-weight: 400;
background: rgba(255,255,255,0.3);
}
.codrops-top a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 0.1em;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.4);
color: #333;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
display: block;
float: left;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.main {
max-width: 69em;
margin: 0 auto;
}
.column {
float: left;
width: 50%;
padding: 0 2em;
min-height: 300px;
position: relative;
text-align: right;
}
.column:nth-child(2) {
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
text-align: left;
}
.column p {
font-weight: 300;
font-size: 2em;
padding: 0 0 0.5em;
margin: 0;
line-height: 1.5;
}
button {
border: none;
padding: 0.6em 1.2em;
background: #DC4B4B;
color: #fff;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 3px -100px;
border-radius: 2px;
text-align; center;
}
button:hover {
background: #DC4B4B;
}
.info {
text-align: center;
font-size: 1.5em;
margin-top: 3em;
clear: both;
padding: 3em 0;
opacity: 0.7;
color: #aca89a;
}
.info a {
font-weight: 700;
font-size: 0.9em;
}
@media screen and (max-width: 46.0625em) {
.column {
width: 100%;
min-width: auto;
min-height: auto;
padding: 2em;
text-align: center;
}
.column p {
font-size: 1.5em;
}
.column:nth-child(2) {
text-align: center;
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
}
@media screen and (max-width: 25em) {
.codrops-header {
font-size: 80%;
}
.codrops-top {
font-size: 120%;
}
.codrops-icon span {
display: none;
}
}
/*component*/
*,
*:after,
*::before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
.st-container,
.st-pusher,
.st-content {
height: 100%;
}
.st-content {
overflow-y: scroll;
background: #f3efe0;
}
.st-content,
.st-content-inner {
position: relative;
}
.st-container {
position: relative;
overflow: hidden;
}
.st-pusher {
position: relative;
left: 0;
z-index: 99;
height: 100%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.st-pusher::after {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.st-menu-open .st-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: 300px;
height: 100%;
background: rgba(0,0,0,0.4);
transition: all 0.5s;
}
.st-menu::after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu-open .st-menu::after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/* content style */
.st-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.st-menu h2 {
margin: 0;
padding: 1em;
color: #DC4B4B;
font-weight: 300;
font-size: 2em;
}
.st-menu ul li a {
display: block;
padding: 1em 1em 1em 1.2em;
outline: none;
box-shadow: inset 0 -1px rgba(0,0,0,0.2);
color: #f3efe0;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
font-weight: 400;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.st-menu ul li:first-child a {
box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}
.st-menu ul li a:hover {
background: rgba(0,0,0,0.2);
box-shadow: inset 0 -1px rgba(0,0,0,0);
color: #fff;
}
/* Individual effects */
/* Effect 9: Scale down pusher */
.st-effect-9.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-9 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-9.st-menu-open .st-pusher {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px);
}
.st-effect-9.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-9.st-menu-open .st-effect-9.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-9.st-menu::after {
display: none;
}
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
padding-left: 300px;
}
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
/**
* sidebarEffects.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
var SidebarMenuEffects = (function() {
function hasParentClass( e, classname ) {
if(e === document) return false;
if( classie.has( e, classname ) ) {
return true;
}
return e.parentNode && hasParentClass( e.parentNode, classname );
}
// http://coveroverflow.com/a/11381730/989439
function mobilecheck() {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function init() {
var container = document.getElementById( 'st-container' ),
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( container, 'st-menu-open' );
},
bodyClickFn = function(evt) {
if( !hasParentClass( evt.target, 'st-menu' ) ) {
resetMenu();
document.removeEventListener( eventtype, bodyClickFn );
}
};
buttons.forEach( function( el, i ) {
var effect = el.getAttribute( 'data-effect' );
el.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();
container.className = 'st-container'; // clear
classie.add( container, effect );
setTimeout( function() {
classie.add( container, 'st-menu-open' );
}, 25 );
document.addEventListener( eventtype, bodyClickFn );
});
} );
}
init();
})();
External CSS
This Pen doesn't use any external CSS resources.