JSFiddle - React, Tailwind, and code Playground
by mreis1
HTML
<script src="https://dl.dropboxusercontent.com/u/21686889/CSS-Multilevel-Menu/modernizr.custom.js"></script>
<!-- MAIN WRAPPER -->
<div class="main clearfix demo-1">
<div class="column">
<p>Experiência com animações.
<br/>HTML5,
<br/>CSS3,
<br/>Modernizr</p>
</div>
<div class="column">
<div id="dl-menu" class="dl-menuwrapper">
<button>Open Menu</button>
<ul class="dl-menu">
<!--back experiment-->
<li class="dl-back"> <a href="#">Back</a>
</li>
<!--Menu item with submenu-->
<li> <a href="#">Fashion</a>
<ul class="dl-submenu">
<li> <a href="#">Shoes</a>
</li>
<li> <a href="#">Sockets</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>CSS
body, html {
font-size: 100%;
padding: 0;
margin: 0;
}
/* Reset */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
content:" ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: Arial, sans-serif;
color: #b1aea6;
background: #fffcf5;
min-height: 800px;
}
a {
color: #ccc;
text-decoration: none;
}
a:hover {
color: #fff;
}
/*
- - - - End of resets
---------------------
------------------------------------------*/
.column {
float: left;
width: 50%;
padding: 0 2em;
min-height: 300px;
min-width: 320px;
position: relative;
}
.column:nth-child(2) {
min-height: 400px;
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}
/*WTF? porque é que ela esta a atribuir estas propriedades ao before?*/
.column:last-child:before {
content:'';
position: absolute;
height: 7px;
background: #ceccc6;
top: 100px;
left: 10px;
}
.column p {
font-weight: 300;
font-size: 2em;
padding: 0;
margin: 0;
text-align: right;
line-height: 1.5;
}
@media screen and (max-width: 46.0625em) {
.main {
padding: 0;
}
.column {
width: 100%;
min-width: auto;
min-height: auto;
padding: 3em 2em;
}
.column p {
text-align: left;
font-size: 1.5em;
}
.column:nth-child(2) {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
background-position: 90px 3em;
}
}
/*style menu*/
.dl-menuwrapper {
width: 100%;
max-width: 300px;
float: left;
position: relative;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
...JavaScript
/**
* jquery.dlmenu.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
// global
var Modernizr = window.Modernizr,
$body = $('body');
// Object
$.DLMenu = function (options, element)
{
this.$el = $(element);
this._init(options);
};
// the options
$.DLMenu.defaults = {
animationClasses: { in : 'dl-animate-in-1',
out: 'dl-animate-out-1'
}
};
$.DLMenu.prototype = {
_init: function (options) {
// $.extend( [deep ], target, object1 [, objectN ] )
/* deep Type: Boolean If true, the merge becomes recursive (aka. deep copy).
target Type: Object The object to extend. It will receive the new properties.
object1 Type: Object An object containing additional properties to merge in.
objectN Type: Object Additional objects containing properties to merge in.
*/
this.options = $.extend(true, {}, $.DLMenu.defaults, options);
// cache some elements and initialize some variables
this._config();
var animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
},
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
};
// animation end event name
...