I design show/hide panel using bootstrap like this:
HTML:
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
.content {
height: 1000px;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sidebar-nav {
margin-left: -250px;
width: 250px;
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
height: 100vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: #fafafa;
border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sideBarCloseIcon {
float: right;
cursor: pointer;
}
.backdrop {
height: 100vh;
width: 100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.sidebar-nav .list-group {
margin-left: -15px;
margin-right: -15px;
}
.sidebar-nav .list-group hr {
margin-top: 0px;
margin-bottom: 0px;
}
.list-group-item-icon {
padding-right: 5px;
}
#hamburgerMenu {
cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
background-color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
<div class="container-fluid">
<div class="navbar-header">
<a id="hamburgerMenu" class="navbar-brand"><span
class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
<a class="navbar-brand">Slide Panel</a>
</div>
</div>
<!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
<div class="row">
<div class="col-xs-12" style="padding: 5px 15px 1px 15px">
<h4 style="padding-left: 0px; font-size: 19px; color: #666">
WorkPanel <span
class="sideBarCloseIcon glyphicon glyphicon-remove"
aria-hidden="true"></span>
</h4>
</div>
</div>
<hr style="margin: 5px -15px" />
<ul class="list-group">
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
</li>
<li class="list-group-item"><span class="badge">2</span>
<i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
<hr />
<li class="list-group-item">
<i class="fa fa-question list-group-item-icon"></i>
<span class="badge">2</span> Forum</li>
<li class="list-group-item">
<i class="fa fa-users list-group-item-icon"></i>
<span class="badge">2</span> Teams</li>
</ul>
<hr style="margin: 5px -15px" />
<form class="form-inline">
<div class="form-group" style="width: 181px">
<label for="exampleInputName2">Search Here</label>
<input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
</div>
<button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
<hr style="margin: 5px -15px" />
<div>
<strong>Need Help ? Contact Us</strong>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
<li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
</ul>
</div>
</div>
<div class="content">
######
</div>
Now In Action work for me But when I Scroll page My Panel in scroll move to top. I need to fix my panel to top in scroll. how do fix This problem?
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
Demo : https://jsfiddle.net/9m7m756a/
You can use fixed positioning just like:
#mySideBar {
position: fixed;
}
Or checkout this Fiddle.
Hope this helps!
Related
For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS
.list-menu {
position: fixed;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.9);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
opacity: 0;
z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1;
z-index: 999999;
visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px;
position: absolute;
top: 32px;
right: 32px;
color: #fff;
cursor: pointer;
}
.circle {
width: 45px;
height: 45px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
cursor: pointer;
z-index:99 ;
padding: 0px 0 0;
}
.circle i {
font-size: 36px;
color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px;
width: 120px;
margin-top: -60px;
margin-left: -60px;
}
.circle.large:before {
margin-top: -18px;
margin-left: -10px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 31.0px;
border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
display: inline-block;
z-index: 0;
}
#media all and (max-width: 1000px) {
.circle.large {
width: 90px;
height: 90px;
margin-top: -45px
;
}
.circle.large:before {
margin-top: -14px;
margin-left: -8px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25.0px;
border-color: transparent transparent transparent #fff;
}
}
and the JavaScript.
$(document).ready(function(){
"use strict";
$('.menu-container').each(function(index) {
$(this).find('.circle').attr('menu-link', index);
$(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
});
$('.menu-container .circle').click(function() {
var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
linkedVideo.toggleClass('reveal-modal');
});
$('section').closest('body').find('.close-iframe').click(function() {
$(this).closest('.list-menu').toggleClass('reveal-modal');
});
Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis
I've been trying to fix for a while but can't seem to find a fix.
Here is also the html for both index.html and hotelam.html
First index
<!-- Navigation section ()
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="container">
<div class="row">
<div class="brand">
<a href="home.html">
<img src="images/Logo4.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Second Hotelam.html
<!-- Navigation section
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="color9">
<div class="container">
<div class="row">
<div class="brand2">
<a href="home.html">
<img src="images/brandl.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
I keep reading the other possible duplicates of this question but I still don't find the solution needed for me to finish this. So, I downloaded a CSS File that contains a Hamburger for all widths, however their class names conflicted with Bootstrap's Nav classes, so I changed the SCSS file and CSS to make it work, then changing also the names in the .js file to avoid errors.
However, it seems like the error is still here and won't go away . This time, the menu list is hidden in the hamburger, however the hamburger is not working. Here's the code for all things affected.
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
If someone can solve this, it would be great! Thanks!
navi: document.querySelector('navi')
should be
navi: document.querySelector('.navi')
as it is a class.
(function() {
var hamburger = {
naviToggle: document.querySelector('.navi-toggle'),
navi: document.querySelector('.navi'),
doToggle: function(e) {
e.preventDefault();
this.naviToggle.classList.toggle('expanded');
this.navi.classList.toggle('expanded');
}
};
hamburger.naviToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });
}());
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
*:focus {
outline: none; }
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif; }
body {
background: none;
color: inherit;
font: inherit; }
a {
color: inherit;
cursor: pointer;
text-decoration: none; }
a:hover {
opacity: 0.8; }
/* nav toggle */
.navi-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2; }
.navi-toggle:hover {
opacity: 0.8; }
.navi-toggle .navi-toggle-bar,
.navi-toggle .navi-toggle-bar::after,
.navi-toggle .navi-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%; }
.navi-toggle .navi-toggle-bar {
margin-top: 0; }
.navi-toggle .navi-toggle-bar::after {
margin-top: 0.8rem; }
.navi-toggle .navi-toggle-bar::before {
margin-top: -0.8rem; }
.navi-toggle.expanded .navi-toggle-bar {
background: transparent; }
.navi-toggle.expanded .navi-toggle-bar::after, .navi-toggle.expanded .navi-toggle-bar::before {
background: white;
margin-top: 0; }
.navi-toggle.expanded .navi-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.navi-toggle.expanded .navi-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
/* nav */
.navi {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
right: -30rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1; }
.navi.expanded {
left: 0; }
.navi ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0; }
/*# sourceMappingURL=nav.css.map */
/* NAVIGATION MENU */
div#main-menu {
width: 100%;
margin: auto;
text-align: center;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 1.5rem;
color: #fff;
padding: 0;
}
ul.dropdown-list-item {
padding: 0;
}
ul.dropdown-list-item li {
list-style: none;
padding: 0;
line-height: 100%;
}
ul.dropdown-list-item li a {
font-size: 1rem;
}
.btn-link:hover{
color: #fff;
}
/*** NAVIGATION ICONS ***/
button.user-icon {
background-color: transparent;
border: none;
}
.nav-icons {
position: absolute;
right: 13%;
top: 23%;
}
/*** END NAVIGATION ICONS ***/
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navi">
<div id="main-menu">
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-one" aria-expanded="true" aria-controls="main-menu">Mens</button>
</h5>
</div>
<div id="dropdown-list-one" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-two" aria-expanded="true" aria-controls="main-menu">Womens</button>
</h5>
</div>
<div id="dropdown-list-two" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-three" aria-expanded="true" aria-controls="main-menu">Accessories</button>
</h5>
</div>
<div id="dropdown-list-three" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-four" aria-expanded="true" aria-controls="main-menu">Equipments</button>
</h5>
</div>
<div id="dropdown-list-four" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="main-menu-list">
<div class="main-menu-header" id="main-menu-one">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#dropdown-list-five" aria-expanded="true" aria-controls="main-menu">More</button>
</h5>
</div>
<div id="dropdown-list-five" class="collapse" aria-labelledby="main-menu-one" data-parent="#main-menu">
<div class="dropdown-list-body">
<ul class="dropdown-list-item">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-default fixed-top" id="nav">
<div class="container">
<div class="navi-toggle">
<div class="navi-toggle-bar"></div>
</div>
<a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
</div>
<div class="container nav-icons">
<button type="button" class="iconton">
<img src="img/cart-product-white.png" alt="">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSearch" id="icon-search">
<img src="img/navbar-icon.png">
</button>
<button type="button" class="iconton" data-toggle="modal" data-target="#userSign" id="icon-user">
<img src="img/user.png">
</button>
</div>
<div class="container">
</div>
</nav>
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>
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>
The following code I have used:
// Code goes here
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
show and hide onclick
I am able to show and hide onclick of button. My requirement is when I click on that button its icon should change and if I click inside sidebar (on sidebar items) sidebar should hide. Can anyone improve my script to achieve it?
$(document).ready(function(){
$('.sidebar').on('click','a',function(e){
var href = $(this).attr('href');
$('iframe').attr('src', href);
e.preventDefault();
//console.log(e.target);
toggleMenu();
})
});
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
$('#menu-button').find('.glyphicon')
.toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
border: solid 1px #eee;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 5%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button class="btn btn-default" onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>