JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="href=&#39;http://fonts.googleapis.com/css?family=Lato:300"></script>
<nav>
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor</a></li>
    </ul>
    <div class="ic">
        <i class="fa fa-align-justify"></i>
    </div>
</nav>

CSS

/*
    Palvelut mitä käytin tässä:
    - Buttonin icon: http://fortawesome.github.io/Font-Awesome/icon/align-justify/
    - Buttonin gradientti: http://www.colorzilla.com/gradient-editor/
    - Buttonin varjo + pyöristykset: http://css3generator.com/
    - Koodi mikä estää sen että nopea klikkailu valitsee tekstiä: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting
    - Fontti: http://www.google.com/fonts#UsePlace:use/Collection:Lato
*/

/* Body toimii täs esimerkis vähän niinku #wrap elementtinä */
body {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 15px; 
}

nav { overflow: auto; background: #f1f1f1; }
nav ul { 
    overflow: hidden;
}

nav ul,
nav li {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
}

nav a {
    display: block;
    padding: 7px 12px;
    margin: 0 3px;
    text-decoration: none;
    color: #444;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

nav .ic { display: none; }

nav i {
    float: right;
    cursor: pointer;
    color: #999;
    margin: 0px;
    padding: 10px 8px 8px 10px;
    border: 1px solid #e1e1e1;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #fcfcfc;
    background:...

JavaScript

var button = $('.ic'),
    menu = $('nav ul'),
    active = 0;

button.on("click", function() {

    var slide = active ? 'slideUp' : 'slideDown'; 
    
    menu.stop(true,true)[ slide ]( 300 );  

    active = !active ? 1 : 0;
    
});