Interactive Forms For User - javascript

I am creating an application which includes filling of lots of form rather chain of forms one after the other.
Can you give me a better way of creating wizard or forms? other than bootstrap modals which I am currently using?
Or can u provide some examples of UI where such forms are used?


HTML
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
Code: http://bootsnipp.com/snippets/featured/form-wizard-using-tabs


Here is the complete DEMO. You need to make common validation script inside the same on click function to validate the form. This is using Bootstrap tabs.
$(document).ready(function(){
$(".showMenu").on("click", function (e) {
var nextTabToShow = $(this).attr("data-nextbtn");
$('a[href="#' + nextTabToShow + '"]').trigger('click')
});
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
var $old_tab = $($(e.target).attr("href"));
var $new_tab = $($(e.relatedTarget).attr("href"));
if ($new_tab.index() < $old_tab.index()) {
$old_tab.css('position', 'relative').css("right", "0").show();
$old_tab.animate({ "right": "-100%" }, 300, function () {
$old_tab.css("right", 0).removeAttr("style");
});
}
else {
$old_tab.css('position', 'relative').css("left", "0").show();
$old_tab.animate({ "left": "-100%" }, 300, function () {
$old_tab.css("left", 0).removeAttr("style");
});
}
}).on('show.bs.tab', function (e) {
var $new_tab = $($(e.target).attr("href"));
var $old_tab = $($(e.relatedTarget).attr("href"));
if ($new_tab.index() > $old_tab.index()) {
$new_tab.css('position', 'relative').css("right", "-2500px");
$new_tab.animate({ "right": "0" }, 500);
}
else {
$new_tab.css('position', 'relative').css("left", "-2500px");
$new_tab.animate({ "left": "0" }, 500);
}
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs hidden" role="tablist">
<li role="presentation" class="active">
</li>
<li role="presentation">
</li>
<li role="presentation">
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="1">
<h4>Step 1</h4>
<div class="text-center">
<button type="button" class="btn continue showMenu" data-nextbtn="2">
Continue <i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="2">
<h4>Step 2</h4>
<div class="text-center">
<button type="button" class="btn continue showMenu" data-nextbtn="3">
Continue <i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
<button type="button" class="btn back showMenu" data-nextbtn="1">
<i class="fa fa-angle-left" aria-hidden="true"></i> Back
</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="3">
<h4>Step 3</h4>
<div class="text-center">
<button type="button" class="btn continue">
Submit
</button>
<button type="button" class="btn back showMenu" data-nextbtn="2">
<i class="fa fa-angle-left" aria-hidden="true"></i> Back
</button>
</div>
</div>
</div>
</div>

Related

Form Wizard Next Button Not Working

I have a problem with the next button. It seems that the button didn't work. The design is okay and I think it has something to do with the javascript and I don't know where since I am still practice front-end.
I tried to do some changes from the javascript and css for hoping it would work but nothing happen a miracle. Does anyone have any idea why is this happening? The original code is came from this link:
https://bootsnipp.com/snippets/rvPDr
Any help would be appreciated.
$(document).ready(function() {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function(e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function(e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard>div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs>li.active>a,
.wizard .nav-tabs>li.active>a:hover,
.wizard .nav-tabs>li.active>a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i {
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs>li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs>li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs>li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width: 585px) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs>li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>

I want the side bar display first and collapse after clicking the button and adding the dropdown to the side of the menu items using bootstrap

I want the side bar menu using bootstrap.
I want to hide the menu even in the large screen by clicking the button.
When collpasing to the left side menu icons should display on the left side.
Inside the menu item by clicking it dropdown to the side.
Please tell me the solution.
I tried using the css and bootstrap and jquery. It is not working.
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2">
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I added some jquery code and chaged this block of your code. rest of the code is same.
Also don't forget to add jquery, font-awesome, and bootstrap cdn in your code. (as included in the snippet below)
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
$(document).ready(function () {
$("a#menu-toggle").click(function (){
$("#wrapper").toggleClass("active");
});
});
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
overflow:visible;
}
.dropdown>.dropdown-menu{
position:absolute;
top:0;
left:100%;
z-index:100;
background-color:black;
margin:0;
padding:0;
border:none;
border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
line-height:45px;
color:white;
background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
background: rgba(255,255,255,0.2);
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li class="dropdown">
<span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

FadeOut pseudo element

I have a home page with images and .png texture which is a pseudo element over each image. I would need this .png texture to FadeOut on hover. Having it configured in the way it is, how may I implement the feature? Or would it be easier to make it by changing the current set up?
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*HEADER*/
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding: 70px 0 70px 0;
}
#media (min-width: 1200px) {
.container{
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
}
.top-buffer {
margin-top: 25px;
}
/*IMG OVERLAY*/
.img-container a {
display: block;
position: relative;
}
.img-container a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('http://feanor.cz/public/img/web/img-cover.png');
}
/*.img-container a:hover:before {
display: none;
}*/
/*DROPDOWN*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #161616;
}
/*IMAGES*/
.masonry-container {
padding: 0;
}
.item {
padding: 3px;
}
.item img {
max-width: 100%;
}
/*CONTACTS*/
.contact_photo img {
max-width: 100%;
}
.contact {
color: #aaa;
}
.contact a {
color: #aaa;
}
.contact a:hover {
color: #fff;
}
.contact img {
margin-top: 3px;
margin-bottom: 10px;
}
.contact p {
font-size: 12pt;
}
/*FOOTER*/
#footer-bottom {
min-height: 30px;
line-height: 30px;
width: 100%;
color: #777;
}
#footer-bottom > li > i {
margin-left: -5px;
}
.copyright {
padding-top: 15px;
}
#email_footer {
padding-top: 15px;
}
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i>
</a>
</li>
<li>
<p>lybvit#gmail.com</p>
</li>
</ul>
</div>
</div>
</body>

use the hover pseudo selector and target the :before pseudoselector use opacity to toggle between the states and transition to animate it
.img-container:hover a:before {
content: "";
opacity:0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*HEADER*/
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding: 70px 0 70px 0;
}
#media (min-width: 1200px) {
.container{
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
}
.top-buffer {
margin-top: 25px;
}
/*IMG OVERLAY*/
.img-container a {
display: block;
position: relative;
}
.img-container a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:1;
background: url('http://feanor.cz/public/img/web/img-cover.png');
}
.img-container:hover a:before {
content: "";
opacity:0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
/*.img-container a:hover:before {
display: none;
}*/
/*DROPDOWN*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #161616;
}
/*IMAGES*/
.masonry-container {
padding: 0;
}
.item {
padding: 3px;
}
.item img {
max-width: 100%;
}
/*CONTACTS*/
.contact_photo img {
max-width: 100%;
}
.contact {
color: #aaa;
}
.contact a {
color: #aaa;
}
.contact a:hover {
color: #fff;
}
.contact img {
margin-top: 3px;
margin-bottom: 10px;
}
.contact p {
font-size: 12pt;
}
/*FOOTER*/
#footer-bottom {
min-height: 30px;
line-height: 30px;
width: 100%;
color: #777;
}
#footer-bottom > li > i {
margin-left: -5px;
}
.copyright {
padding-top: 15px;
}
#email_footer {
padding-top: 15px;
}
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i>
</a>
</li>
<li>
<p>lybvit#gmail.com</p>
</li>
</ul>
</div>
</div>
</body>

Use :hover psuedo class and transitions to fade out the image:
.img-container:hover a:before {
opacity: 0;
transition: opacity 1s ease;
}
This will fade from default opacity: 1; to 0 over one second with an easing animation effect.

multi step form wizard jquery in joomla

i create a view in joomla, and i create a multi step form wizard in jquery and set in view of joomla. but when i click on continue button next step not working. i remove $ in code and add jQuery words but not happening.
please help.
my code in joomla
<section id="sp-page-title"><div class="row"><div id="sp-title" class="col-sm-12 col-md-12"><div class="sp-column "></div></div></div></section>
<section id="sp-main-body">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</section>
and i create myjquery.js: -
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
and css:-
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}

Bootstrap 3 mobile version won't work

I have some code here in, which when condensed into the mobile version it is improperly rendered:
the html is here(with sidenavbar)
Does anyone know how to make the boxes render properly in the mobile version
Kind regards,
.pdsa-summary-block-primary {
background-color:#428bca;
color:#fff;
}
.pdsa-summary-block-primary .summary-footer {
background-color:deepskyblue;
}
.pdsa-summary-block-primary .summary-footer a {
color:white;
}
.pdsa-summary-block-success {
background-color:#3c763d;
color:#fff;
}
.pdsa-summary-block-success .summary-footer {
background-color:green;
}
.pdsa-summary-block-success .summary-footer a {
color:white;
}
.pdsa-summary-block-info {
background-color:#31708f;
color:#fff;
}
.pdsa-summary-block-info .summary-footer {
background-color:teal;
}
.pdsa-summary-block-info .summary-footer a {
color:white;
}
.pdsa-summary-block-danger {
background-color:#a94442;
color:#fff;
}
.pdsa-summary-block-danger .summary-footer {
background-color:red;
}
.pdsa-summary-block-danger .summary-footer a {
color:white;
}
/*Structure of Summary blocks*/
.pdsa-summary-block {
position: relative;
width:100%;
margin:0.3em;
padding:1em;
min-height:15em;
}
.pdsa-summary-block .summary-background i, .pdsa-summary-block .summary-background div {
margin-left:-0.4em;
margin-top:0.1em;
font-size:8em;
opacity:0.3;
}
.pdsa-summary-block .summary-body {
position:absolute;
top:1.3em;
right:0.8em;
}
.pdsa-summary-block .summary-body .summary-line-1 {
text-align:right;
font-size:xx-large;
}
.pdsa-summary-block .summary-body .summary-line-2 {
text-align:right;
font-size:medium;
}
.pdsa-summary-block .summary-footer {
position:absolute;
bottom: 0em;
right: 0em;
width:100%;
padding:0.4em;
font-weight: 300;
text-transform: uppercase;
font-size:small;
opacity:0.6;
}
.pdsa-summary-block .summary-footer a {
text-decoration:none;
}
.pdsa-summary-block .summary-footer:hover {
opacity:1;
cursor:pointer;
}
.pdsa-sn-wrapper {
position:absolute;
top:3.6em;
left:0em;
width:13em;
height:100%;
background-color:#FF9900;
/*orange.*/
transition:left 0.3s linear;
-moz-transition:left 0.3s linear;
-webkit-transition:left 0.3s linear;
}
.pdsa-sn-wrapper ul {
list-style:none;
width:11em;
margin-top:2em;
margin-left:1em;
padding:0em;
}
.pdsa-sn-wrapper ul li {
margin-top: 1em;
margin-bottom:0.5em;
}
/* Make hover background .pdsa-sn-wrapper ul li:hover {
background-color:#760909;
} */
.pdsa-sn-wrapper ul li a {
color: white;
text-decoration:none;
padding:0.5em;
}
.pdsa-sn-wrapper ul li a:hover {
text-decoration:none;
color:white;
}
.pdsa-sn-wrapper ul li a:active, .pdsa-sn-wrapper ul li a:focus {
text-decoration:none;
outline:none;
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand {
margin-left:-0.5em;
font-size: large;
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand a {
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand a:hover {
color:white;
background:none;
}
.pdsa-sn-wrapper ul li a span {
margin-top:-1em;
margin-bottom:-1em;
margin-left:1em;
margin-top: -1em;
padding-top:-1em;
padding-bottom:-1em;
}
.pdsa-sn-wrapper ul li ul {
list-style:none;
margin-top: 1em;
margin-left: 1em;
}
/*Make left nav turn into icon only on mobile*/
#media all and (max-width:768px) {
.pdsa-sn-wrapper {
left:-10em;
/*changed above to +13em. now it will take up part of screen.*/
}
.pdsa-sn-wrapper ul li:hover {
background-color:#FF9900;
}
.pdsa-sn-wrapper ul li a i {
padding-left:10em;
margin-top:-1em;
margin-bottom:-1em;
}
.body-content {
margin-left:3em;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body class="notransition">
<div class="container">
<div class="row">
<header> <a class="linkStyle" href="Default.html">My Tunes</a>
</header>
</div>
<nav id="sideNavParent" class="pdsa-sn-wrapper">
<ul>
<li class="pdsa-sn-brand">Music
</li>
<li> <a href="default.html">
<span class="visible-sm visible-md visible-lg">Home</span>
<i class="glyphicon glyphicon-home visible-xs"></i>
</a>
</li>
<li> <a href="#" data-toggle="collapse" data-target="#ulGenres">
<span class="visible-sm visible-md visible-lg">Genres <b class="caret"></b></span>
<i class="glyphicon glyphicon-globe visible-xs"></i>
</a>
<div class="visible-sm visible-md visible-lg">
<ul id="ulGenres" class="collapse" data-parent="#sideNavParent">
<li> All Genres
</li>
<li> Jazz
</li>
<li> Country
</li>
<li> Rock
</li>
</ul>
</div>
</li>
<li> <a href="#" data-toggle="collapse" data-target="#ulPlaylists">
<span class="visible-sm visible-md visible-lg">Playlists <b class="caret"></b></span>
<i class="glyphicon glyphicon-list-alt visible-xs"></i>
</a>
<div class="visible-sm visible-md visible-lg">
<ul id="ulPlaylists" class="collapse" data-parent="#sideNavParent">
<li> All Playlists
</li>
<li> My Top Rated
</li>
<li> Top Country
</li>
<li> Top Classic Rock
</li>
</ul>
</div>
</li>
<li> <a href="#">
<span class="visible-sm visible-md visible-lg">Songs</span>
<i class="glyphicon glyphicon-music visible-xs"></i>
</a>
</li>
<li> <a href="#">
<span class="visible-sm visible-md visible-lg">Downloads</span>
<i class="glyphicon glyphicon-download visible-xs"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="container body-content">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-primary">
<div class="summary-background"> <i class="glyphicon glyphicon-globe"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">14</div>
<div class="summary-line-2">Genres</div>
</div>
<div class="summary-footer"> View Genres
<i class="glyphicon glyphicon-chevron-right" style="float:right;"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-success">
<div class="summary-background"> <i class="glyphicon glyphicon-list-alt"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">5</div>
<div class="summary-line-2">Playlists</div>
</div>
<div class="summary-footer"> See playlists...
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-info">
<div class="summary-background"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">2143</div>
<div class="summary-line-2">Songs</div>
</div>
<div class="summary-footer"> All Songs.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-danger">
<div class="summary-background"> <i class="glyphicon glyphicon-download"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">1</div>
<div class="summary-line-2">Downloads</div>
</div>
<div class="summary-footer"> Get Downloads.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="pdsa-readme-box pdsa-readme-box-primary">
<div class="readme-header"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="readme-body">
<h1>Free Music</h1>
<p>Each day we have a free song selected especially for you!</p>
</div>
<div class="readme-footer"> + See my song
</div>
</div>
</div>
</div>
</div>
</body>

This might help you in adjusting your code or as a base so you have much more control over both.
body,
html {
height: 100%;
}
body {
padding-top: 65px;
}
.navbar.navbar-default {
background: #fff;
border-bottom: none;
border-bottom: 6px solid #FF9900;
}
.sidebar-fixed {
margin-top: 50px;
padding: 5px 18px;
position: fixed;
width: 175px;
height: 100%;
top: 0;
left: 0;
background: #FF9900;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
ul.sidebar-list {
list-style: none;
display: inline;
text-align: left;
}
.sidebar-fixed #ulGenres,
.sidebar-fixed #ulPlaylists {
list-style: none;
text-align: left;
margin-left: -20px;
}
.sidebar-fixed #ulGenres > li,
.sidebar-fixed #ulPlaylists > li {
padding-top: 10px;
font-size: 13px;
}
.sidebar-fixed #ulGenres > li >a,
.sidebar-fixed #ulPlaylists > li > a {
color: #fff;
text-decoration: none;
}
ul.sidebar-list > li {
font-size: 18px;
padding-bottom: 25px;
}
ul.sidebar-list > li > a {
color: #fff;
text-decoration: none;
}
.navbar-default .collapse .navbar-nav > li > a,
.navbar-default .navbar-header a.navbar-brand {
color: #3e474f;
}
.main-content {
margin-left: 175px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.nav-icons {
padding-top: 12px;
margin-right: 25px;
float: right;
position: absolute;
right: 0;
}
.nav-icons span {
padding-left: 10px;
padding-right: 10px;
font-size: 20px
}
.nav-icons a {
color: #FF9900;
}
#media (max-width: 767px) {
.sidebar-fixed {
width: 85px;
}
.main-content {
margin-left: 80px;
padding: 0;
}
ul.sidebar-list {
text-align: center;
}
ul.sidebar-list > li {
font-size: 12px;
padding-bottom: 25px;
}
.sidebar-fixed #ulGenres,
.sidebar-fixed #ulPlaylists {
margin-left: -40px;
text-align: center;
}
.sidebar-fixed li .nav-text,
.sidebar-fixed li span.caret {
display: none;
}
}
/*Content*/
.pdsa-summary-block-primary {
background-color: #428bca;
color: #fff;
}
.pdsa-summary-block-primary .summary-footer {
background-color: deepskyblue;
}
.pdsa-summary-block-primary .summary-footer a {
color: white;
}
.pdsa-summary-block-success {
background-color: #3c763d;
color: #fff;
}
.pdsa-summary-block-success .summary-footer {
background-color: green;
}
.pdsa-summary-block-success .summary-footer a {
color: white;
}
.pdsa-summary-block-info {
background-color: #31708f;
color: #fff;
}
.pdsa-summary-block-info .summary-footer {
background-color: teal;
}
.pdsa-summary-block-info .summary-footer a {
color: white;
}
.pdsa-summary-block-danger {
background-color: #a94442;
color: #fff;
}
.pdsa-summary-block-danger .summary-footer {
background-color: red;
}
.pdsa-summary-block-danger .summary-footer a {
color: white;
}
/*Structure of Summary blocks*/
.pdsa-summary-block {
position: relative;
width: 100%;
margin: 0.3em;
padding: 1em;
min-height: 15em;
}
.pdsa-summary-block .summary-background i,
.pdsa-summary-block .summary-background div {
margin-left: -0.4em;
margin-top: 0.1em;
font-size: 8em;
opacity: 0.3;
}
.pdsa-summary-block .summary-body {
position: absolute;
top: 1.3em;
right: 0.8em;
}
.pdsa-summary-block .summary-body .summary-line-1 {
text-align: right;
font-size: xx-large;
}
.pdsa-summary-block .summary-body .summary-line-2 {
text-align: right;
font-size: medium;
}
.pdsa-summary-block .summary-footer {
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
padding: 0.4em;
font-weight: 300;
text-transform: uppercase;
font-size: small;
opacity: 0.6;
}
.pdsa-summary-block .summary-footer a {
text-decoration: none;
}
.pdsa-summary-block .summary-footer:hover {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="#">My Tunes</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-user"></span>
</a>
<a href="#"> <span class="glyphicon glyphicon-lock"></span>
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="sidebar-fixed" id="sideNavParent">
<ul class="sidebar-list">
<li>
<a href="#"> <span class="nav-text"> Music</span> <span class="glyphicon glyphicon-headphones"></span>
</a>
</li>
<li>
<a href="#"> <span class="nav-text"> Home</span> <span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li>
<a href="#nope" data-toggle="collapse" data-target="#ulGenres"> <span class="nav-text"> Genres </span> <span class="glyphicon glyphicon-globe"></span> <span class="caret"></span>
</a>
<ul id="ulGenres" class="collapse" data-parent="#sideNavParent">
<li> All Genres
</li>
<li> Jazz
</li>
<li> Country
</li>
<li> Rock
</li>
</ul>
</li>
<li>
<a href="#nope" data-toggle="collapse" data-target="#ulPlaylists"> <span class="nav-text"> Playlists </span> <span class="glyphicon glyphicon-list-alt"></span> <span class="caret"></span>
</a>
<ul id="ulPlaylists" class="collapse" data-parent="#sideNavParent">
<li> All Playlists
</li>
<li> My Top Rated
</li>
<li> Top Country
</li>
<li> Top Classic Rock
</li>
</ul>
</li>
<li>
<a href="#"> <span class="nav-text"> Songs </span> <span class="glyphicon glyphicon-music"></span>
</a>
</li>
<li>
<a href="#"> <span class="nav-text"> Downloads </span> <span class="glyphicon glyphicon-download"></span>
</a>
</li>
</ul>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-primary">
<div class="summary-background"> <i class="glyphicon glyphicon-globe"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">14</div>
<div class="summary-line-2">Genres</div>
</div>
<div class="summary-footer"> View Genres
<i class="glyphicon glyphicon-chevron-right" style="float:right;"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-success">
<div class="summary-background"> <i class="glyphicon glyphicon-list-alt"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">5</div>
<div class="summary-line-2">Playlists</div>
</div>
<div class="summary-footer"> See playlists...
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-info">
<div class="summary-background"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">2143</div>
<div class="summary-line-2">Songs</div>
</div>
<div class="summary-footer"> All Songs.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-danger">
<div class="summary-background"> <i class="glyphicon glyphicon-download"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">1</div>
<div class="summary-line-2">Downloads</div>
</div>
<div class="summary-footer"> Get Downloads.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="pdsa-readme-box pdsa-readme-box-primary">
<br>
<div class="readme-header"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="readme-body">
<h1>Free Music</h1>
<p>Each day we have a free song selected especially for you!</p>
</div>
<div class="readme-footer"> + See my song
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Categories