Collapse bootstrap side bar - javascript

I've searching stackoverflow for quite a while now but still can't find the answer.
Is there any way for a navigation bar to collapse to the side using bootstrap? What I mean is you normally have horizontal navigation bar then when shrunk, it comes out from the side instead of dropping from top to bottom when a button is clicked. Does that make sense? I'm sorry I'm butchering this but it's kind of hard to explain.
Thanks for your help.

This can probably give you a base to start with if nothing else.
This uses it's own data-attribute to replace the default data-toggle="collapse" and the rest is just converting the navigation into a sidebar when the viewport is under 768px. The nav links are wrapped in <div class="navbar-default side-collapse open"> which adds the needed CSS for the sidebar and replaces the elements that would normally appear with the default classes.
Compare this example to the default in the Docs to see the changes.
See working example Snippet
$(document).ready(function() {
$('[data-toggle=collapse-side]').click(function(e) {
$('.side-collapse').toggleClass('open');
});
});
#media screen and (max-width: 768px) {
.navbar-side .side-collapse {
top: 50px;
bottom: 0;
left: 0;
width: 256px;
position: fixed;
overflow: auto;
transition: all 0.3s cubic-bezier(.87, -.41, .19, 1.44);
}
.navbar-side .side-collapse.open {
width: 0;
}
}
<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-side navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" type="button" class="navbar-toggle"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-default side-collapse open">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button> <strong>YUP!</strong>
</div>
</div>

Related

Angular 5 sidenav

I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>
<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<button type ="button"
class ="navbar-toggle collapsed"
data-toggle ="collapse"
data-target ="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/

Bootstrap Navbar wont play animation

I am having a bit of trouble getting my animation to play when my Bootstrap 3.3.7 navbar collapses upon scrolling from the top of the page. If I change the size of other divs in my navbar in Sublime while BrowserSync is active, it will show the animation but still doesn't work when I scroll. The example I followed was:
http://jsfiddle.net/Filo/m7yww8oa/
and recreating the problem using much of my existing code is:
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<div class="navbar-header" id="header">
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<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" id="title"><img id="logo" src="images/logo.jpg" /></div>
</div>
<div class="collapse navbar-collapse" id="collapsable-nav">
<ul id="nav-list" class="nav navbar-nav navbar-right visible-xs visible-sm visible-md visible-lg">
<li>About US<br><i class="fas fa-users visible-md visible-lg"></i></li>
<li>Why Us<br><i class="fas fa-question-circle visible-md visible-lg"></i></li>
<li>Contact<br><i class="fas fa-envelope visible-md visible-lg"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</header>
<div class="container-fluid" id="main">
<img src="images/goldwire1.jpg" id="goldwire1" />
</div>
<div class="container" id="services">
</div>
<div class="container" style="margin-top: 100px;">
<div class="fifty" style="float: right;"><img src="images/probe.jpg" id="probe"></div>
</div>
<div class="info" style="color: #f5f5dc; background-color: #003366;">
</div>
<script src="script.js"></script>
https://jsfiddle.net/7rqv3m8r/
I can't seem to figure out why my animation won't play. I can see in my dev tools that .shrink is added once I scroll off the top and the webkit animation is active. Any help is appreciated, thank you for taking time to check this out.

Bootstrap 3 keep menu open and show div

I've built a Nav bar with a profile dropdown (right hand side of menu):
http://www.bootply.com/Rqj51l2VFO
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" <!--style="width:96%" -->>
<li>Open Cases</li>
<li>Closed Cases</li>
<li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li>
<li class="active">{$case['object_ref']}</li>
<!-- <li style="float:right;"><span class="glyphicon glyphicon-question-sign"/></li> -->
</ul>
<!-- http://bootsnipp.com/snippets/featured/account-in-navbar -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="menu">
<a href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>{$person['name']}</strong>
<span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login" style="width: 400px;">
<div class="row">
<div class="col-lg-4">
<p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p>
<p>Change Photo</p>
</div>
<div class="collapse" id="change_pic">
<p>Hi!</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Email Address</strong></p>
<p class="text-left small">{$person['main_location[email]']}</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<p>Logout</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
When I click the change photo link, I want a Div to open and the menu to stay open so the user can interact with an input that shows I.e the user would enter a URL to the photo they want in the profile.
This works fine but the menu disappears. So I added the following JS so the menu stays:
JS:
$('#menu .dropdown-menu').on({
"click": function(e) {
e.stopPropagation();
}
});
The issue I have is that now the menu stays open - the bootstrap collapse class isn't working to show/hide.
Could anybody explain what I'm doing wrong here please?
Here is one way to keep the dropdown open after click and keep collapse class working to show/hide. ...
add ID to your Change photo button:
<p>Change Photo</p>
use this following function:
$('#change-photo').on('click', function () {
$('#change_pic').toggle();
return false;
});
check it out here: http://www.bootply.com/8Yo0fBXgN9#

Bootstrap navbar toggle use to add class

I use Bootstrap V3 in Wordpress.
What I want to achieve is that when someone clicks the button in the collapsed navbar menu, the div with the class .slider gets a extra class.
This is the HTML from the navbar:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<div class="collapse navbar-collapse" id="navbar">
<?php
wp_nav_menu( array(
'theme_location' => 'navbar-right',
'depth' => 2,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And this is the HTML from the div where I want to add a extra class:
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div> <!-- close slider -->
I've tried this with CSS:
.navbar-default .navbar-collapse .in ~ .slider{
margin-top: -246px;
padding-top: 176px;
}
And this with jQuery:
$(function() {
$("#navbar").click(function() {
$(".slider").addClass("sliderMove");
});
});
The extra class that should be added on slider is:
.sliderMove{
margin-top: -246px;
padding-top: 176px;
}
The purpose of this is that the slider that is after/under the navbar stay's under the navbar when it collapsed.
You just need to hook into the Bootstrap collapse event of your collapsible navbar. There is no need to assign an extra click handler to the collapse nav button.
Collapse Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Here is an example.
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
$(".slider").addClass("your-class");
})
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
$(".slider").removeClass("your-class");
})
.slider {
width: 100%;
min-height: 100px;
background-color: tomato;
}
.your-class {
background-color: lawngreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div class="slider"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The button you are are willing to click is having a class navbar-toggle and the div having navbar has an id navbar . So to achieve the click event on button you have to use the button id not the div id. So your jQuery code will go like:
$('.navbar-toggle').click(function(){
if($('#navbar').hasClass('in')){
$(".slider").addClass("sliderMove");
}else{
$(".slider").removeClass("sliderMove");
}
});
As you would like to remove the class when you collapse the menu again using same button.
you were doing everything fine, but you need to use toggleClass() and select other CSS selector that is not #navbar
it also possible to add a delay? Because the class is already activated before the navbar is fully collapsed.
Yes it is possible, by adding setTimeout()
$(".collapsed").click(function() {
// toggle the class after half second
setTimeout(function() {
$(".slider").toggleClass("sliderMove");
}, 500);
});
/* just to show in small devices */
#media (max-width: 992px) {
.sliderMove {
background: red;
height: 100vh;
width: 100%
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="slider"></div>
Try something like this:
(as you required when the user clicks the navbar-toggle button, adds a certain class to a certain div with jQuery)
$('body').ready(function() {
$('.navbar-toggle').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
});
Try this
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<div class="collapse navbar-collapse" id="navbar">
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Javascript
$('.navbar-collapse').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
CSS
.sliderMove{
height:100%;
width:100%
}
DEMO HERE

How to make my slide toggle from left to right in bootstrap?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
I am using bootstrap for my responsive navbar on mobile view.
When I click the button and the navbar menu is display from top to down.
What should I do to can make it from left to right?(Remember to resize your windows to mobile size).
You can check out this popular Bootstrap fork available: Jasny Bootstrap
It has the same slide in from left effect.
<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
You need to override following two properties to archive this. Here you should also use pull-left bootstrap class, this class element move into left side only but doesn't set margin. I thought you should override base on the requirement.
.nav-left{
float: left !important;
margin: 8px 15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed nav-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
With the Jasny Bootstrap slide-in plug-in, the default class is "navmenu-fixed-left". You can change the class to "navmenu-fixed-right" to make the menu slide in from the right side:
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li>About</li>
<li>Capabilities</li>
</ul>
</div>
If you also want the toggle button to appear on the right side, you need to adjust some CSS:
.navbar-default .navbar-toggle-box {
float: right;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
position: absolute;
right: 0;
}

Categories