"slide Quick Mode Color"
Bootstrap 3.0.0 Snippet by bnk2972

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html> <body> <div class="container"> <div class="col-md-12"> <div class="switch"> <span>Select Quick mode color</span> <div class="slide"> <div class="color-bar"> <a href="javascript:void(0)" class="color-list orange"><span class="glyphicon glyphicon-ok"></span></a> <a href="javascript:void(0)" class="color-list pink"></a> <a href="javascript:void(0)" class="color-list purple"></a> <a href="javascript:void(0)" class="color-list red"></a> <a href="javascript:void(0)" class="color-list blue"></a> <a href="javascript:void(0)" class="color-list green"></a> <a href="javascript:void(0)" class="color-list black"></a> <a href="javascript:void(0)" class="close">Cancel</a> </div> <div class="tab"> <span class="glyphicon glyphicon-chevron-right"></span> </div> </div> </div> </div> <div class="col-md-12 m-t-20"> <div class="switch"> <div class="slide-2"> Quick mode color Click! <div class="tab-2"> <span class="glyphicon glyphicon-chevron-up"></span> </div> </div> <div class="color-bar-2"> <a href="javascript:void(0)" class="color-list orange"><span class="glyphicon glyphicon-ok"></span></a> <a href="javascript:void(0)" class="color-list pink"></a> <a href="javascript:void(0)" class="color-list purple"></a> <a href="javascript:void(0)" class="color-list red"></a> <a href="javascript:void(0)" class="color-list blue"></a> <a href="javascript:void(0)" class="color-list green"></a> <a href="javascript:void(0)" class="color-list black"></a> <a href="javascript:void(0)" class="close-2">Cancel</a> </div> </div> </div> </div> </body> </html>
body { padding: 50px; } .col-md-12 { text-align: center; } .switch { width: 300px; height: 36px; background: white; overflow: hidden; position: relative; border-radius: 5px; display: inline-block; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 12px 0 rgba(0, 0, 0, 0.19); } .switch > span { position: absolute; font-size: 18px; width: 100%; margin-top: 6px; color: #e0e0e0; text-align: center; left: 0; cursor: default; } .slide { width: 340px; height: 36px; background: white; position: absolute; left: -100%; z-index: 100; transition: left .7s; -webkit-transition: left .5s; -moz-transition: left .5s; -o-transition: left .5s; } .slide-2 { line-height: 40px; width: 300px; height: 36px; cursor: pointer; position: absolute; text-align: center; color: #e0e0e0; font-size: 18px; z-index: 1000; background: #fff; transition: left .7s; top:0; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; } .slide-2.open { top: -100%; } .color-bar-2 { width: 300px; height: 36px; float: left; background: #fff; padding-top: 6px; padding-left: 12px; } .close-2 { float: right; margin-top: 2px; margin-right: 10px; font-size: 18px; color: #000; font-weight: bold; opacity: .2; } .close-2:hover, .close-2:focus{ text-decoration: none; color: #000; opacity: .5; } .tab-2 { width: 40px; height: 36px; background: orange; float: right; text-align: center; cursor: pointer; border-radius: 0px 0px 0px 0px; color: #fff; } .tab { width: 40px; height: 36px; background: orange; float: right; text-align: center; cursor: pointer; border-radius: 0px 5px 5px 0px; } .tab > span { font-size: 18px; color: white; margin-top: 8px; } .color-bar { width: 300px; height: 36px; float: left; background: #fff; padding-top: 6px; padding-left: 12px; } .slide.open { left: 0; } .color-list { display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin-right: 2px; position: relative; color: ; } .color-list > span { color: #fff; position: absolute; width: 100%; text-align: center; margin-top: 5px; left: 0; } .red { background: rgb(220, 81, 84); } .green { background: rgb(78, 191, 142); } .purple { background: rgb(176, 98, 178); } .blue { background: rgb(106, 161, 195); } .black { background: rgb(68, 68, 68); } .orange { background: rgb(252, 176, 92); } .pink { background: rgb(221, 131, 175); } .close { float: right; margin-top: 2px; margin-right: 10px; font-size: 18px; }
$(document).ready(function(){ $(".tab").click(function() { $(".slide").addClass("open"); }); $(".close").click(function() { $(".slide").removeClass("open") }); $(".color-bar > .color-list").click(function() { $(".color-bar > .color-list").html(''); $(this).html('<span class="glyphicon glyphicon-ok"></span>'); let colorName = $(".tab").attr('class').split(' ')[1]; let newColor = $(this).attr('class').split(' ')[1]; $(".tab").removeClass(colorName).addClass(newColor); }); $(".slide-2").click(function() { $(this).addClass("open"); }); $(".color-bar-2 > .color-list").click(function() { $(".color-bar-2 > .color-list").html(''); $(this).html('<span class="glyphicon glyphicon-ok"></span>'); let colorName = $(".tab-2").attr('class').split(' ')[1]; let newColor = $(this).attr('class').split(' ')[1]; $(".tab-2").removeClass(colorName).addClass(newColor); }); $(".close-2").click(function() { $(".slide-2").removeClass("open"); }); });

Related: See More


Questions / Comments: