Responsive Bootstrap Push Menu - javascript

i m trying to create Responsive Bootstrap Push Menu , i have created this templete and this for computer
and for mobile it look like this
so when we click dropdown it should push to the left side and show the dropdown menu list
this is code i have tried
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container
<div class="navbar-header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
<button type="button" class="navbar-toggle toggle-menu menu-left push-body" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="col-xs-8 col-md-8" style="height:30px;margin-top:5px;">
<input type="text" placeholder="email" class="form-control">
</div>
<div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
<div class="collapse navbar-collapse cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<script src="js/jPushMenu.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.toggle-menu').jPushMenu({closeOnClickLink: false});
$('.dropdown-toggle').dropdown();
});
//]]>
</script>
but i m not able to push to left side.

Is this something you looking for
http://jsfiddle.net/w6qc954t/
your template http://jsfiddle.net/w6qc954t/2/
its using jPushMenu.js by takien at github other than follwing part is include in that js
$(window).resize(function() {
$('.cbp-spmenu').v2p({
height:'100vh'
});
});
$(window).resize(); // trigger event so it shows on load
$(document).ready(function(){
$('.toggle-menu').jPushMenu({closeOnClickLink: false});
$('.dropdown-toggle').dropdown();
});

This has been answered here already, use an "off canvas" layout provided for in Bootstrap code: Bootstrap 3 Slide in Menu / Navbar on Mobile.

Related

anchor hover every anchor except the one hovered change color

When a user hover on anchor every anchor except the one hovered change color. Lets say there is link1 link2 link3. If the user hovers on link1 I want the color of link2 and link3 to be changed. same with the others.
Here is my attempt on it so far link on codpen
a:hover{color:green}
#link1:hover{color: originalcolor}
#link2:hover{color: originalcolor}
#link3:hover{color: originalcolor}
This can be achieved using jQuery hover() function like this -
$( "a" ).hover(
function() {
$("a").not($(this)).css("color","green");
},function(){
$("a").css("color","white");
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li 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 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end container -->
P.S Expand the snippet to full screen to view best result
Pretty sure you can do this with pure CSS. Add a hover rule for the container that changes the children, but also add a hover state rule for the child that you want to be different.
ul li {
transition: background-color 200ms ease;
}
ul:hover li {
background-color: lightblue;
}
ul:hover li:hover {
background-color: yellow;
}
<ul>
<li>Hello</li>
<li>World</li>
<li>Foo</li>
<li>Bar</li>
<ul>

How to make the search field responsive?

I have used bootstrap navbar for the start, how do I make the search field dynamic as that of Stack Overflow? For now instead of expanding it contracts.
<template name="DashboardLayout">
<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">
<div class="form-group">
<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.."> </div>
</div>
</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>
</template>
I hope this can help you.
https://jsfiddle.net/pablodarde/6r842g4r/
Add a class name to your input search field...
HTML
<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.." class="alive"> </div>
</div>
CSS
.alive {
width: 200px;
transition: all 0.5s;
}
.expand {
width: 350px;
}
JavaScript
const input = document.querySelector('.alive');
input.addEventListener('click', () => {
input.className += ' expand';
});
input.addEventListener('blur', () => {
input.className = 'alive';
});

Apply header height to body as padding top on window resize

I'm able to fetch and applying the height of the header as padding top to bodyon window.resize. the issue is when i tried to resize the window to full width the resize function is not working i think.
var headerHeight = $('header').innerHeight();
console.log(headerHeight);
function carouselHeight(){
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
};
$(document).ready(function(e) {
carouselHeight();
});
$(window).resize(function(){
carouselHeight();
});
body {
min-height: 2000px;
padding-top: 70px;
}
<link href="http://getbootstrap.com/dist/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>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Why Bootstrap</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Why Bootstrap</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div>
</div> <!-- /container -->
Sorry I found the mistake in my script. Header height is not mentioned in the function. so it is not getting the correct height in on resize
function carouselHeight(){
var headerHeight = $('header').innerHeight();
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
console.log(headerHeight);
console.log('hi');
};
$(document).ready(carouselHeight);
$(window).resize(carouselHeight);
You have to execute them like this:
var headerHeight = $('header').innerHeight();
console.log(headerHeight);
function carouselHeight(){
$('body').removeAttr('style');
$('body').css("padding-top", headerHeight);
};
$(document).ready(carouselHeight);
$(window).resize(carouselHeight);

Large dropdown div will appear on click of button with class navbar-toggle

I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Category</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>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});

Bootstrap 3 menu - two collapse buttons - only one open at a time

I am trying to make a menu in bootstrap 3. When it gets down to mobile size, I have two collapse nav-toggle buttons. As default, when one is open, it just gets stacked on top of each other. What I would like is one drop down open at a time.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search">
<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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li 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 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div id="test2" class="nav-search collapse">
<div class="search_box">
<ul class="nav navbar-nav">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div><!-- /.container-fluid -->
</nav>
I searched and found this, but that is for bootstrap 2:
Bootstrap Menu - Two Collapse buttons which toggle each other? Meaning, only 1 open at a time
I feel like I am missing something easy. Below is a jsfiddle link:
http://jsfiddle.net/Bootstrap714/RfsS9/4/
You have got the name of the event wrong. You need to call it on on('show.bs.collapse'... instead of just on on('show'....
Here is a fixed fiddle
Found a kind of "hackish" solution
if, the sibilings button, doesn't have a collapsed class, click on it.
$('.navbar-toggle').on('click', function () {
if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) {
$(this).siblings('.navbar-toggle').click();
}
});
http://jsfiddle.net/t96Ry/

Categories