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
Related
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/
I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-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>
<a class="navbar-brand navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-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>
<a class="navbar-brand navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
this.girish - that code works perfectly.
How to change data-offset-top for mobile view? Also, on click link doesn't hide the menu. I tried some founded code from stackoverflow but no luck. Could someone please help with this link below :
http://smalldesigncompany.com/client/agami/s4/index.html
<nav class="navbar navbar-default zero-mar" >
<div class="container">
<!-- 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=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 pull-left">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span></li>
<li><span class="right">Contact</span></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
This answer might make think I oversimplify the thing, but often I see jquery/bootstrap scripts loaded twice, and that means two listeners waiting for the button toggle. The first one opens, the second one closes instantly.
Solution: look for scripts loaded twice via browser inspecting (F12) and remove where is convenient.
try this way
$('.navbar-nav a').on('click', function () {
$(".navbar-toggle").click() //bootstrap 3.x
});
Never use multiple IDs on same div
And for the navbar-toggle just use ID of your navbar-collapse menu in the data-target attribute of the navbar-toggle as:
data-target="#bs-example-navbar-collapse-1"
And for hiding the navbar-collapse menu again you have to trigger the click of your navbar-toggle button on the click of .navbar-nav > li > a as:
Code Snippet
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<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>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-toggle').trigger('click');
});
<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>
<nav class="navbar navbar-default zero-mar">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--NAVBAR-HEADER-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="scroll" href="#top">Home</a>
</li>
<li>
<a class="scroll" href="#people">Meet Our People</a>
</li>
<li>
<a class="scroll" href="#projects">Our Capabilities</a>
</li>
<li>
<a class="scroll" href="#process">Our Process</a>
</li>
<li>
<a class="scroll" href="#why">Why Agami</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="right">Projects</span>
</li>
<li><span class="right">Contact</span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
I want to change the class of list item dynamically according to user's click on it. I have a menu and I want to assign .active class to only that menu which is clicked by user and initially Home Menu must be active
Here is my code
function activeclass(id)
{
document.getElementById(id).className += "active";
}
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO <a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</section>
in CSS file active class with li will be used to highlight the selected page menu
Although there are better ways to achieve the thing you want (like the #Jitendra Tiwari's answer or my example below), I want to point you to the problem in your code.
The problem is that you pass to the function activeclass an unknown parameter: id.
When you debug your code you can see that the id param is empty:
You need to pass a string parameter with the relevant id:
function activeclass(id) {
document.getElementById(id).className += "active";
}
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
http://jsbin.com/dadoqop/edit?html,css,js
Also, remove the public keyword from your code. It's not in javascript
A working example without jQuery:
[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
elm.addEventListener('click', function() {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
elm.parentNode.classList.add('active');
});
});
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<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>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery">Gallery</li>
<li id="contactus">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
You need to remove active class from other li and add on currently clicked item.
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li').click(function(){
// Step 1 - remove active class from all `li`
$('li').removeClass('active');
// Step 2 - add active class on currently clicked li
$(this).addClass('active');
});
});
</script>
Don't forgot to include jquery library.
Using Javascript, you can use the below code:
var ul = document.getElementById("top-menu");
var li = ul.getElementsByTagName("li");
//Set the Home menu as active for first time
li[0].classList.add("active");
//add click event listener for each menu item, and add class active on current clicked menu item.
for(var i=0; i<li.length; i++){
li[i].addEventListener("click", function(){
removeActiveClass();
this.classList.add("active");
});
}
//Remove the active class from the menu items
function removeActiveClass() {
for(var i=0; i<li.length; i++){
li[i].classList.remove("active");
}
}
I have not used any jQuery. Hope this helps you. You do not need to add click event on HTML. Just the below HTML is enough:
<ul id="top-menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Try this method.
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
#yield('logo')
<li id="home">Home</li>
<li id="aboutus">About Us</li>
<li id="products">Products</li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>
<li id="contactus">Contact</li>
</ul>
<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;
}