<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <!-- uncomment code for absolute positioning tweek see top comment in css --> <!-- <div class="absolute-wrapper"> </div> --> <!-- Menu --> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div class="brand-wrapper"> <!-- Hamburger --> <button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Brand --> <div class="brand-name-wrapper"> <a class="navbar-brand" href="#"> #ArgentinaVota </a> </div> <!-- Search --> <a data-toggle="collapse" href="#search" class="btn btn-default" id="search-trigger"> <span class="glyphicon glyphicon-search"></span> </a> <!-- Search body --> <div id="search" class="panel-collapse collapse"> <div class="panel-body"> <form class="navbar-form" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Buscar"> </div> <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-ok"></span></button> </form> </div> </div> </div> </div> <!-- Main Menu --> <div class="side-menu-container"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span>Candidatos</a></li> <li class="active"><a href="#"><span></span>Propuestas</a></li> <li class="active"><a href="#"><span></span>Quejas</a></li> <!-- Dropdown--> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#dropdown-lvl1"> <span class="glyphicon glyphicon-user"></span> Adminitración <span class="caret"></span> </a> <!-- Dropdown level 1 --> <div id="dropdown-lvl1" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#">Verificar Candidatos</a></li> <li><a href="#">Resetear Contraseñas</a></li> </ul> </div> </div> </li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> <!-- Main Content --> <div class="container-fluid"> <div class="side-body"> <div class="container"> <form role="form" style="width:400px; margin: 0 auto;"> <h1>Ingrese su Propuesta</h1> <div> <a href="#" data-toggle="modal" data-target="#image-modal">Añada imágenes</a> </div> <div class="required-field-block"> <textarea rows="3" class="form-control" placeholder="Descipción"></textarea> <div class="required-icon"> <div class="text">*</div> </div> </div> <button class="btn btn-primary">Publicar</button> </form> </div> </div> </div> </div> <div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"><strong>Upload Files</strong> <small>Bootstrap files upload</small></div> <div class="panel-body"> <!-- Standar Form --> <h4>Select files from your computer</h4> <form action="" method="post" enctype="multipart/form-data" id="js-upload-form"> <div class="form-inline"> <div class="form-group"> <input type="file" name="files[]" id="js-upload-files" multiple> </div> <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button> </div> </form> <!-- Drop Zone --> <h4>Or drag and drop files below</h4> <div class="upload-drop-zone" id="drop-zone"> Just drag and drop files here </div> <!-- Progress Bar --> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> <!-- Upload Finished --> <div class="js-upload-finished"> <h3>Processed files</h3> <div class="list-group"> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-01.jpg</a> <a href="#" class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>image-02.jpg</a> </div> </div> </div> </div> </div> </div> </div>

/* layout.css Style */ .upload-drop-zone { height: 200px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 200px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; } input, textarea, button { margin-top:10px } /* Required field START */ .required-field-block { position: relative; } .required-field-block .required-icon { display: inline-block; vertical-align: middle; margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; color: rgba(0, 0, 0, 0.65); text-transform: uppercase; font-weight: normal; border-radius: 0.325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; transition: background 0.1s linear; font-size: 75%; } .required-field-block .required-icon { background-color: transparent; position: absolute; top: 0em; right: 0em; z-index: 10; margin: 0em; width: 30px; height: 30px; padding: 0em; text-align: center; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .required-field-block .required-icon:after { position: absolute; content: ""; right: 1px; top: 1px; z-index: -1; width: 0em; height: 0em; border-top: 0em solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 0em solid transparent; border-right-color: inherit; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .required-field-block .required-icon .text { color: #B80000; font-size: 26px; margin: -3px 0 0 12px; } /* Required field END */ :focus { outline: none; } .row { margin-right: 0; margin-left: 0; } /* Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality A quick fix is to change .side-menu to -> position:absolute and uncomment the code below. You also need to uncomment -> <div class="absolute-wrapper"> </div> in the html file you also need to tweek the animation. Just uncomment the code in that section -------------------------------------------------------------------------------------------------------------------- If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/ This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large */ /*.absolute-wrapper{ position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; }*/ .side-menu { position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; } .side-menu .navbar { border: none; } .side-menu .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav .active a { background-color: transparent; margin-right: -1px; border-right: 5px solid #e7e7e7; } .side-menu .navbar-nav li { display: block; width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav li a { padding: 15px; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body { padding: 0; background-color: #f3f3f3; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .side-menu #search-trigger { background-color: #f3f3f3; border: 0; border-radius: 0; position: absolute; top: 0; right: 0; padding: 15px 18px; } .side-menu .brand-name-wrapper { min-height: 50px; } .side-menu .brand-name-wrapper .navbar-brand { display: block; } .side-menu #search { position: relative; z-index: 1000; } .side-menu #search .panel-body { padding: 0; } .side-menu #search .panel-body .navbar-form { padding: 0; padding-right: 50px; width: 100%; margin: 0; position: relative; border-top: 1px solid #e7e7e7; } .side-menu #search .panel-body .navbar-form .form-group { width: 100%; position: relative; } .side-menu #search .panel-body .navbar-form input { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 50px; } .side-menu #search .panel-body .navbar-form .btn { position: absolute; right: 0; top: 0; border: 0; border-radius: 0; background-color: #f3f3f3; padding: 15px 18px; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; border-bottom: 1px solid #e7e7e7; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-webkit-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } /* Slide side menu*/ /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */ .side-menu-container > .navbar-nav.slide-in { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-menu-container > .navbar-nav { /* Add position:absolute for scrollable menu -> see top comment */ position: fixed; left: -300px; width: 300px; top: 43px; height: 100%; border-right: 1px solid #e7e7e7; background-color: #f8f8f8; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Uncomment for scrollable menu -> see top comment */ /*.absolute-wrapper{ width:285px; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }*/ @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-moz-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @-webkit-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } /* Slide side body*/ .side-body { margin-left: 5px; margin-top: 70px; position: relative; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .body-slide-in { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Hamburger */ .navbar-toggle { border: 0; float: left; padding: 18px; margin: 0; border-radius: 0; background-color: #f3f3f3; } /* Search */ #search .panel-body .navbar-form { border-bottom: 0; } #search .panel-body .navbar-form .form-group { margin: 0; } .navbar-header { /* this is probably redundant */ position: fixed; z-index: 3; background-color: #f8f8f8; } /* Dropdown tweek */ #dropdown .panel-body .navbar-nav { margin: 0; } }

$(function() { $('.required-icon').tooltip({ placement: 'left', title: 'Required field' }); }); + function($) { 'use strict'; // UPLOAD CLASS DEFINITION // ====================== var dropZone = document.getElementById('drop-zone'); var uploadForm = document.getElementById('js-upload-form'); var startUpload = function(files) { console.log(files) } uploadForm.addEventListener('submit', function(e) { var uploadFiles = document.getElementById('js-upload-files').files; e.preventDefault() startUpload(uploadFiles) }) dropZone.ondrop = function(e) { e.preventDefault(); this.className = 'upload-drop-zone'; startUpload(e.dataTransfer.files) } dropZone.ondragover = function() { this.className = 'upload-drop-zone drop'; return false; } dropZone.ondragleave = function() { this.className = 'upload-drop-zone'; return false; } }(jQuery); $(function () { $('.navbar-toggle').click(function () { $('.navbar-nav').toggleClass('slide-in'); $('.side-body').toggleClass('body-slide-in'); $('#search').removeClass('in').addClass('collapse').slideUp(200); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').toggleClass('slide-in'); }); // Remove menu for searching $('#search-trigger').click(function () { $('.navbar-nav').removeClass('slide-in'); $('.side-body').removeClass('body-slide-in'); /// uncomment code for absolute positioning tweek see top comment in css //$('.absolute-wrapper').removeClass('slide-in'); }); });