I have a basic html-page with a navbar (Navbar Documentation) and a collapsible sidenav (SideNav Documentation).
The sidenav itself works fine but the "onOpenStart" and "onEndClose" events both trigger as soon as the page is done loading and not when the sidenav opens/closes.
I guess an alternative would be to hook some events on the sidenav-trigger and go from there but that seems quite unneccessary if these events already exist.
JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Any help would be appreciated
HTML
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i id="test" class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
</body>
JS
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: console.log("I trigger as soon as the page is loaded"),
onCloseEnd: console.log("same")
});
According to the documentation the onOpenStart and onCloseEnd events need a callback function. But, you are using the result of a computation: console.log(....). Because that value is undefined you are not adding the event handlers!
In order to overcome the issue you need to change your init to (updated fiddle):
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: function () {
console.log("I trigger as soon as the page is loaded");
},
onCloseEnd: function () {
console.log("same");
}
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#!" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
Related
I'm trying to add a dropdown menu in my nav bar using materialise, but it's not working. I'm adding the code snippet. In addition to this, I have imported materialise CSS and icons in the head, as well as the JS and JQuery in the body.
Can someone help me with where I'm going wrong? This is the documentation https://materializecss.com/navbar.html#!
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wraper #362b32">
<div class="container">
<ul class= "right hide-on-med-and-down">
<li>Home</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Articles<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
})
</script>
Check that the class names are correct. The class nav-wraper in the <nav> should be nav-wrapper, not nav-wraper.
As for the dropdown, the code is initializing the dropdown for the class dropdown-trigger, but the HTML uses dropdown-button. Change class="dropdown-button" to class="dropdown-trigger".
The documentation also states that the correct attribute for specifying the ID of the dropdown target is data-target, but the HTML uses data-activates, so change that.
Finally, JQuery should be loaded before Materialize, so that Materialize can register the .dropdown() function with JQuery.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wrapper">
<div class="container">
<ul class="right">
<li>Home</li>
<li>
<a class="dropdown-trigger" href="#" data-target="dropdown1">
Articles<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
Dropdown menu visible | Dropdown menu not visible. I've made a simple dropdown menu and i was wondering how you could hide and reveal it if you click the arrow. i thought maybe if you set the dropdown to display none and when you click the arrow (the icon is from font awsome) it changes to display block so it reveals itself. and when you click it again it hide itself again. I tried something with JS but that didnt work out.
here is my html:
<div class="container">
<div class="row categoriën-onder">
<div class="col-3 categoriën">
<ul>
<li>
<a class="categoriën-link "href="#">
categoriën
<i id="dropdown-icon" class="fas fa-chevron-down"></i>
</a>
<ul class="dropdown">
<li> Wandlampen </li>
<li> Hanglampen </li>
<li> Tafellampen </li>
<li> Vloerlampen </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
You are spot on with your description on how to do this.
1) add an event listener to the dropdown icon that listens for the click.
2) the listener should call a function the uses JS to get the menu.
3) toggle the visibility based on the element style.display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="container">
<div class="row categoriën-onder">
<div class="col-3 categoriën">
<ul>
<li>
<a class="categoriën-link "href="#">
categoriën
<i id="dropdown-icon" class="fas fa-chevron-down"></i>
</a>
<ul class="dropdown">
<li> Wandlampen </li>
<li> Hanglampen </li>
<li> Tafellampen </li>
<li> Vloerlampen </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
function toggleDropdown() {
const menu = document.querySelector(".dropdown");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
document.getElementById("dropdown-icon").addEventListener("click", toggleDropdown);
</script>
</body>
</html>
Make use of class to reveal the dropdown so that you can own the control on every element from CSS including icon rotation.
Also I slightly modified the HTML in order to support multiple dropdown items.
Fiddle: https://jsfiddle.net/kb0te5u4/
document.querySelectorAll(".dropdown-icon").forEach(function(dropdown) {
dropdown.addEventListener("click", function(e) {
e.target.closest('li').classList.toggle('toggle');
});
});
ul li.toggle .dropdown {
display: none;
}
ul li.toggle .dropdown-icon {
transform: rotate(180deg)
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row categoriën-onder">
<div class="col-3 categoriën">
<ul>
<li>
<a class="categoriën-link " href="#">
categoriën
<i class="dropdown-icon fas fa-chevron-down"></i>
</a>
<ul class="dropdown">
<li> Wandlampen </li>
<li> Hanglampen </li>
<li> Tafellampen </li>
<li> Vloerlampen </li>
</ul>
</li>
<li>
<a class="categoriën-link " href="#">
categoriën 1
<i class="dropdown-icon fas fa-chevron-down"></i>
</a>
<ul class="dropdown">
<li> Wandlampen </li>
<li> Hanglampen </li>
<li> Tafellampen </li>
<li> Vloerlampen </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I'm trying to create a nav bar with dropdown as it's explained in the Materialize documentation.
http://archives.materializecss.com/0.100.2/navbar.html
This is the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
But when i click the dropdown button, nothing happens.
What am I doing wrong?
There are two problems with your code:
You were missing a reference to materialize.min.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The newest version of Materialize uses data-target instead of data-activates. The documentation you're reading is for an older version. Here is the latest documentation: https://materializecss.com/ (I've updated the versions for you in the example below.)
$('.dropdown-button').dropdown();
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
You need to load the Materialize js as well - https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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/materialize/0.100.2/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
I did an interesting test.
When I just create a html page detached from my project and past the code you sent me here, it works even in my machine. It's not working inside my project in the app.component.html (I'm using angular client) and it won't load after running with npm start. Maybe some configuration in the project.
i'm using ajax load to get some content on my page. I'm working with bootstrap 3 and bootstrap toggle. when the content is loaded the bootstrap 3 content works fine (you can clearly see the panel panel-primary). But the bootstrap toggle content doesn't get loaded (you can just see some checkboxes). Does annyone know how to get this working? Or should i look out to some other toggle switches? Ifso which ones?
EDIT: i haven't tested out event binding yet because i cant get the bootstrap toggle css to work on the ajax loaded code. Event binding has nothing to do with the css right?
Scripts used by the main html code (the one with ajax load)
Main html code
code being loaded into a div by the main html code
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle JavaScript -->
<script src="../bower_components/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- Custom Domotica JavaScript -->
<script> $(document).ready(function(){
// Set trigger and container variables
var trigger = $('#side-menu li ul li a'),
container = $('#page-wrapper');
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
alert("target: " + target)
// Load target page into container
container.load(target + '.html', function (response, status, xhr) {});
// Stop normal link behavior
return false;
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home automation web page">
<meta name="author" content="">
<title>Home</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap toggle -->
<link href="../bower_components/bootstrap-toggle-master/css/bootstrap-toggle.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="index.html">Home</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> Failure
<span class="pull-right text-muted small">No respons from Controller 1</span>
</div>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-gear fa-fw"></i>
</a>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-sign-out fa-fw"></i>
</a>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="glyphicon glyphicon-home"></i> House<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Weather
</li>
<li>
Energy
</li>
<li>
Water
</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-star"></i> 1st floor<span class="fa arrow"></span>
<ul class="nav nav-second-level" id="side-menu2">
<li>
Hallway
</li>
<li>
Main bedroom
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-star"></i> main floor<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Kitchen
</li>
<li>
Living room
</li>
<li>
Garage
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-star"></i> Basement
<!-- /.nav-second-level -->
</li>
<li>
<i class="glyphicon glyphicon-tree-deciduous"></i> Garden
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>
<div class="panel panel-primary" id="switchespanel">
<div class="panel-heading">
<h3 class="panel-title">Switches</h3>
</div>
<div class="panel-body">
<table class="table">
<tr>
<th>Location</th>
<th>State</th>
</tr>
<tr>
<td>Testswitch0</td>
<td>
<label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
</label>
</td>
</tr>
</table>
</div>
</div>
Make sure that you are loading both the bootstrap-toggle js file and css file properly. Specifically check that they are in the location your links point to, or even use the cdn versions listed below:
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
Your paths must be wrong or you forgot to include the js file altogether, and you should see a warning about this in your console because otherwise the code works fine.
Regarding dynamically loaded content.
The first elements work because, after the html first loads, bootstrap-toggle.min.js looks for any elements that have the attribute data-toggle="toggle" and calls .bootstrapToggle() on them applying the plugin. This only happens when the page loads.
If you later add more toggles, you'll need to initialize them yourself via .bootstrapToggle(). Iv'e updated the example below to simulate adding toggles dynamically and explain the approach I would take to do that. See the comments in the code for more details.
// timeout to simulate ajax
setTimeout(function(){
// add an element dynamically,
$('.table').append('<tr><td>Testswitch0</td><td><label><input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S2" data-size="mini"></label></td></tr>');
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
}, 2000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<div class="panel panel-primary" id="switchespanel">
<div class="panel-heading">
<h3 class="panel-title">Switches</h3>
</div>
<div class="panel-body">
<table class="table">
<tr>
<th>Location</th>
<th>State</th>
</tr>
<tr>
<td>Testswitch0</td>
<td><label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
</label></td>
</tr>
<tr>
<td>Testswitch0</td>
<td><label>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S1" data-size="mini">
</label></td>
</tr>
</table>
</div>
</div>
The best solution that worked:
1- Load Jquery before bootstrap. Here Jquery first, Ajax second and bootstrap in the end.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
2- Call bootstrapToggle on ajax complete:
$(document).ajaxComplete(function() {
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle();
});
3- Note: Call your custom script jquery at the end
I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.