JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>
<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a>

            </li>
            <li><a href="#">Iphone VS HTC</a>

            </li>
            <li><a href="#">Users</a>

            </li>
            <li><a href="#">Sign Out</a>

            </li>
        </ul>
    </div>
    <div class="main-content">
        <div class="fixed-cell">
            <div class="swipe-area"><a href="#" data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>

            </div>
        </div>
        <div class="content">
             <h1>Сравним смартфоны iPhone 5S и HTC One</h1> 
            <p>
                <img src='http://placehold.it/400x60.jpg' />
            </p>
            <p>Главной особенностью нового топового iPhone для нас, гиков, стал даже не сканер отпечатков пальцев (эта функция интересна как раз рядовым пользователям), а 64-разрядный процессор Apple A7. Компания из Купертино первой решилась переходить на новую архитектуру, обогнав конкурентов и сделав огромный рывок в производительности. Истинность этого предположения проще всего проверить сравнением свежайшего iPhone 5S с вышедшим в начале этого года HTC One.</p>
            <br/>
            <p>Установленный в iPhone 5S Apple A7 представляет из себя двухъядерный 64-bit ARMv8 чип с частотой 1.3 ГГц и ускорителем PowerVR G6430. Противостоять ему будет 32-bit ARMv7 процессор Qualcomm Snapdragon 600 с четырьмя ядрами Krait 300, частота которых может достигать 1.7 ГГц. В чип также встроен ускоритель Adreno 320. Конечно, серьезно на результаты тестов будет влиять и программное обеспечение: в iPhone установлена iOS 7.0.1 с полной поддержкой 64-разрядных процессоров, а тестовый HTC One оснащен лишь Android 4.1.2, так как операторская модификация AT&amp;T еще не получила обновление. Но вряд ли не совсем...

CSS

.lf {
    width:960px;
    margin:0 auto;
    background-color:#F3F3F3;
}
.lp {
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
}
body {
    background-image:url(../apple.jpg);
}
.lp {
    padding-top:50px;
    padding-bottom:50px;
}
body, html {
    height: 100%;
    margin: 0;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out;
    -ms-transition: left 0.4s ease-in-out;
    -o-transition: left 0.4s ease-in-out;
    transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}
.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
    top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -ms-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 60px;
    width: 100%;
}
.main-content .content h1 {
    font-weight: 100;
}
.main-content .content p {
    width: 100%;
   ...

JavaScript

$(window).load(function () {
    $("[data-toggle]").click(function () {
        var toggle_el = $(this).data("toggle");
        $(toggle_el).toggleClass("open-sidebar");
    });
    $(".swipe-area").swipe({
        swipeStatus: function (event, phase, direction, distance, duration, fingers) {
            if (phase == "move" && direction == "right") {
                $(".container").addClass("open-sidebar");
                return false;
            }
            if (phase == "move" && direction == "left") {
                $(".container").removeClass("open-sidebar");
                return false;
            }
        }
    });
});