Bootstrap Snippet New Vendor profile Display Menu using HTML CSS Bootstrap jQuery

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); /* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/ .board { width: 100%; margin: -20px auto; height: relative; background: #fff; } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: -40px auto; margin-bottom: 0; box-sizing: border-box; } .board > div.board-inner{ background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } p.narrow{ width: 60%; margin: 10px auto; } .liner{ height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; /* background-color: #ffffff; */ border: 0; border-bottom-color: transparent; } span.round-tabs{ width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tabs.one{ color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34); } li.active span.round-tabs.one{ background: #1dcaff !important; border: 2px solid #ddd; color: rgb(34, 194, 34); } span.round-tabs.two{ color: #febe29; border: 2px solid #febe29; } li.active span.round-tabs.two{ background: #1dcaff !important; border: 2px solid #ddd; color: #febe29; } span.round-tabs.three{ color: #3e5e9a;border: 2px solid #3e5e9a; } li.active span.round-tabs.three{ background: #1dcaff !important; border: 2px solid #ddd; color: #3e5e9a; } span.round-tabs.four{ color: #f1685e;border: 2px solid #f1685e; } li.active span.round-tabs.four{ background: #1dcaff !important; border: 2px solid #ddd; color: #f1685e; } span.round-tabs.five{ color: #999; border: 2px solid #999; } li.active span.round-tabs.five{ background: #1dcaff !important; border: 2px solid #ddd; color: #f1685e; } .nav-tabs > li.active > a span.round-tabs{ color:white ; -webkit-border-radius:50px; -moz-border-radius: 50px; border-radius: 50px; } .nav-tabs > li { width: 20%; } /*li.active:before { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: -2px; border: 10px solid transparent; border-bottom-color: #fff; z-index: 1; transition:0.2s ease-in-out; }*/ li:after { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #fa0; transition:0.1s ease-in-out; } li.active:after { content: " "; position: absolute; left: 46%; opacity:1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #1dcaff; } .nav-tabs > li a{ width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .nav-tabs > li a:hover{ background: transparent; } .tab-content{ } .tab-pane{ position: relative; overflow: scroll; height: relative; } .tab-content .head{ font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .btn-outline-rounded{ padding: 10px 40px; margin: 20px 0; border: 2px solid transparent; border-radius: 25px; } .btn.green{ background-color:#5cb85c; /*border: 2px solid #5cb85c;*/ color: #ffffff; } @media( max-width : 585px ){ .board { width: 90%; height:auto !important; } span.round-tabs { font-size:16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head{ font-size:20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height:50px; } li.active:after { content: " "; position: absolute; left: 35%; } .btn-outline-rounded { padding:12px 20px; } } /* START OF DEMO CSS - NOT NEEDED */ html, body { height: 100% } /* BODY BACKGROUND IMAGE DOESNT ALWAYS REACH THE BOTTOM OF THE BROWSER*/ body { background-color: rgb(100, 100, 100); /* background-image: url(http://s3.amazonaws.com/sitebuilderreport-assets/media/files/000/000/440/original/Old.jpg?1387493955);*/ background-repeat: no-repeat; background-position: center center; background-size: cover; color: rgb(255, 255, 255); } .white-background { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); padding-top: 10px; border-radius: 4px; } .title { font-size: 3em; font-weight: 700; text-shadow: 0px 0px 5px rgb(51, 51, 51); text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8); text-align: center; } #fullscreen { position: absolute; top: 100px; right: 10px; } /* END OF DEMO CSS */ .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-fixed-left { position: absolute; top: 39px; left: 9px; border-radius: 100px; } .navbar-minimal { height:70px; width: 60px; min-height: 60px; max-height: 100%; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); border-width: 0px; z-index: 1000;border-radius: 100px; } .navbar-minimal > .navbar-toggler { position: relative; min-height: 60px; border-bottom: 0px solid rgb(81, 81, 81); z-index: 100; cursor: pointer; } .navbar-minimal.open > .navbar-toggler, .navbar-minimal > .navbar-toggler:hover { background-color: #fa0; } .navbar-minimal > .navbar-toggler > span { position: absolute; top: 50%; right: 50%; margin: -8px -8px 0 0; width: 16px; height: 16px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAxNiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsN2gxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDksMCw4LjU1MiwwLDgKCVMwLjQ0OCw3LDEsN3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLDEyaDE0YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxSDFjLTAuNTUyLDAtMS0wLjQ0OC0xLTEKCVMwLjQ0OCwxMiwxLDEyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsMmgxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDQsMCwzLjU1MiwwLDMKCVMwLjQ0OCwyLDEsMnoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjMzLDI4Ljk3bDExLjY0LTExLjY0YzAuNDU5LTAuNDU5LDEuMjA0LTAuNDU5LDEuNjYzLDAKCWMwLjQ1OSwwLjQ1OSwwLjQ1OSwxLjIwNCwwLDEuNjYzTDIuOTkzLDMwLjYzM2MtMC40NTksMC40NTktMS4yMDQsMC40NTktMS42NjMsMEMwLjg3MSwzMC4xNzQsMC44NzEsMjkuNDMsMS4zMywyOC45N3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjk5MywxNy4zM2wxMS42NDEsMTEuNjRjMC40NTksMC40NTksMC40NTksMS4yMDQsMCwxLjY2MwoJcy0xLjIwNCwwLjQ1OS0xLjY2MywwTDEuMzMsMTguOTkzYy0wLjQ1OS0wLjQ1OS0wLjQ1OS0xLjIwNCwwLTEuNjYzQzEuNzg5LDE2Ljg3MSwyLjUzNCwxNi44NzEsMi45OTMsMTcuMzN6Ii8+Cjwvc3ZnPgo=); background-repeat: no-repeat; background-position: 0 0; -webkit-transition: -webkit-transform .3s ease-out 0s; -moz-transition: -moz-transform .3s ease-out 0s; -o-transition: -moz-transform .3s ease-out 0s; -ms-transition: -ms-transform .3s ease-out 0s; transition: transform .3s ease-out 0s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .navbar-minimal > .navbar-menu { position: absolute; top: -10000px; left: 0px; margin: 0px; padding: 0px; list-style: none; z-index: 50; background-color: #fa0; background-color: #1dcaff; } .navbar-minimal > .navbar-menu > li { margin: 0px; padding: 0px; border-width: 0px; height: 54px; } .navbar-minimal > .navbar-menu > li > a { position: relative; display: inline-block; color: rgb(255, 255, 255); padding: 20px 23px; text-align: left; cursor: pointer; border-bottom: 1px solid rgb(81, 81, 81); width: 100%; text-decoration: none; margin: 0px; } .navbar-minimal > .navbar-menu > li > a:last-child { border-bottom-width: 1px; } .navbar-minimal > .navbar-menu > li > a:hover { background-color: blue; } .navbar-minimal > .navbar-menu > li > a > .glyphicon { float: right; } .navbar-minimal.open { width: 320px; } .navbar-minimal.open > .navbar-toggler > span { background-position: 0 -16px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .navbar-minimal.open > .navbar-menu { top: 60px; width: 100%; min-height: 100%; } @media (min-width: 768px) { .navbar-minimal.open { width: 60px; } .navbar-minimal.open > .navbar-menu { overflow: visible; } .navbar-minimal > .navbar-menu > li > a > .desc { position: absolute; display: inline-block; top: 50%; left: 130px; margin-top: -20px; margin-left: 20px; text-align: left; white-space: nowrap; padding: 10px 13px; border-width: 0px !important; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); opacity: 0; } .navbar-minimal > .navbar-menu > li > a > .desc:after { z-index: -1; position: absolute; top: 50%; left: -10px; margin-top: -10px; content:''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgb(51, 51, 51); border-right-color: rgba(51, 51, 51, 0.8); } .navbar-minimal > .navbar-menu > li > a:hover > .desc { left: 60px; opacity: 1; } } @import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"; .mt40 { margin-top: 00px; } .a{ margin-left: -30px; margin-top: -20px; } .panel { position: relative; overflow: hidden; display: block; border-radius: 0 !important; } .panel-default { border-color: #ebedef !important; } .panel .panel-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; } .panel .panel-body a { overflow: hidden; } .panel .panel-body a img { display: block; margin: 0; width: 100%; height: auto; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .panel .panel-body a.zoom:hover img { transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -moz-transform: scale(1.3); } .panel .panel-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: hidden; height: 100%; width: 100%; background-color: #000; opacity: 0; transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -webkit-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; } .panel .panel-body a.zoom:hover span.overlay { display: block; visibility: visible; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } .panel .panel-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; } .panel .panel-footer { padding: 8px !important; background-color: #f9f9f9 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .panel .panel-footer h4 { display: inline; font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e margin: 0 !important; padding: 0 !important; } .panel .panel-footer i.glyphicon { display: inline; font-size: 1.125em; cursor: pointer; } .panel .panel-footer i.glyphicon-thumbs-up { color: #1abc9c; } .panel .panel-footer i.glyphicon-thumbs-down { color: #e74c3c; padding-left: 5px; } .panel .panel-footer div { width: 15px; display: inline; font: 300 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e; text-align: center; background-color: transparent !important; border: none !important; } .modal-title { font: 400 normal 1.625em "Roboto",Arial,Verdana,sans-serif; } .modal-footer { font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; } /*! * Lightbox for Bootstrap 3 by @ashleydw * https://github.com/ashleydw/lightbox * * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE */ .ekko-lightbox-container{position:relative} .ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%} .ekko-lightbox-nav-overlay a{ z-index:100;display:block; width:49%;height:100%; padding-top:45%;font-size:30px; color:#fff;text-shadow:2px 2px 4px #000; opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2); -webkit-transition:opacity .5s; -moz-transition:opacity .5s; -o-transition:opacity .5s; transition:opacity .5s } .ekko-lightbox-nav-overlay a:empty{width:49%} .ekko-lightbox a:hover{text-decoration:none;opacity:1} .ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left} .ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left} /* CSS used here will be applied after bootstrap.css */ html, body { height: 100%;} /* So that the modal is displayed in the preview.. You can probably remove this and the above rule */ .img-modal { display: block; } .img-modal .modal-dialog { /* An arbitrary minimum height. Feel free to modify this one as well */ min-height: relative; height: 100%; width:90%; } .img-modal .modal-content, .img-modal .modal-body, .img-modal .row, .img-modal .modal-image { height: 100%; } .modal-content { border-radius: 0; } .modal-body { padding-top: 0; padding-bottom: 0; } .modal-image { background: #000; padding :0; } .modal-image img { margin: 0 auto; max-height: 100%; max-width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .img-modal .img-modal-btn { display: block; position: absolute; top: 0; bottom: 0; background: black; opacity: 0; font-size: 1.5em; width: 45px; color: #fff; transition: opacity .2s ease-in; } .img-modal .modal-image:hover .img-modal-btn { opacity: 0.4; } .img-modal .modal-image:hover .img-modal-btn:hover { opacity: 0.75; } .img-modal .img-modal-btn.right { right: 0; } .img-modal .img-modal-btn i { position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: -.75em; } .img-modal .modal-meta { position: relative; height: 100%; } .img-modal .modal-meta-top { position: absolute; top: 0; left: 0; right: 0; bottom: 45px; padding: 5px 10px; overflow-y: auto; } .img-modal .modal-meta-top .img-poster img { height: 70px; width: 70px; float: left; margin-right: 15px; } .img-modal .modal-meta-top .img-poster strong { display: block; padding-top: 15px; } .img-modal .modal-meta-top .img-poster span { display: block; color: #aaa; font-size:.9em; } .img-modal .modal-meta-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; border-top: solid 1px #ccc; } .img-modal .img-comment-list { list-style: none; padding: 0; } .img-modal .img-comment-list li { margin:0; margin-top:10px; } .img-modal .img-comment-list li > div { display:table-cell; } .img-modal .img-comment-list img { border-radius:50%; width: 42px; height: 42px; margin-right: 10px; margin-top: 20px; } .img-modal .img-comment-list p { margin: 0; } .img-modal .img-comment-list span { font-size: .8em; color: #aaa; }

$(function(){ $('a[title]').tooltip(); $('#gal').hide(); }); $(function () { /* START OF DEMO JS - NOT NEEDED */ if (window.location == window.parent.location) { $('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>'); $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5'); $('#fullscreen').attr('title', 'Back To Bootsnipp'); } $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = $('#fullscreen').attr('href'); }); $('#fullscreen').tooltip(); /* END DEMO OF JS */ $('.navbar-toggler').on('click', function(event) { event.preventDefault(); $(this).closest('.navbar-minimal').toggleClass('open'); }) }); $(document).ready(function() { $('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){ var $this = $(this), c = $this.data('count'); if (!c) c = 0; c++; $this.data('count',c); $('#'+this.id+'-bs3').html(c); }); $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); }); $(function(){ // This code is not even almost production ready. It's 2am here, and it's a cheap proof-of-concept if anything. $(".img-modal-btn.right").on('click', function(e){ e.preventDefault(); cur = $(this).parent().find('img:visible()'); next = cur.next('img'); par = cur.parent(); if (!next.length) { next = $(cur.parent().find("img").get(0)) } cur.addClass('hidden'); next.removeClass('hidden'); return false; }) $(".img-modal-btn.left").on('click', function(e){ e.preventDefault(); cur = $(this).parent().find('img:visible()'); next = cur.prev('img'); par = cur.parent(); children = cur.parent().find("img"); if (!next.length) { next = $(children.get(children.length-1)) } cur.addClass('hidden'); next.removeClass('hidden'); return false; }) });