Navigation bar, include with all file - javascript

I have a site (www.mhk.me). In this site(html) navigation bar focus is change when the page change.
But now I am going make a back-end of this site (Converting on php).
I made a file name(Navigation.php) and then I include with all file.
The problem is that in php site the focus in this is always on HOME not change to other navigation when I change the page.
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav class="nav-main mega-menu">
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="active">
<a class="dropdown-toggle" href="index.html">
Home
</a>
</li>
<li>
<a class="dropdown-toggle" href="about.html">
About Me
</a>
</li>
<li>
<a class="dropdown-toggle" href="services.html">
Services
</a>
</li>
<li>
<a class="dropdown-toggle" href="portfolio.html">
Portfolio
</a>
</li>
<li>
<a class="dropdown-toggle" href="http://demo.mhk.me">
My Templates
</a>
</li>
<li>
<a class="dropdown-toggle" href="contact.html">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>

You will need a script that can compare the url ,so that you can assign .active class to the menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$(".nav-main li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' ){
$(this).parent().addClass("active");}
if($(this).attr("href") == 'index.php' && pgurl == '' ) {
$(this).parent().addClass("active");
}
})
});

Math3w, Your code need to be slightly changed.
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav-main li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).parent().addClass("active");
}
if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
$(this).parent().addClass("active");
}
})
});

<html>
<head>
<style>ul{
list-style:none;
}
li{
cursor:pointer;
float:left;
padding:10px;
background-color:grey;
border-radius:5px;
margin:10px;
}
ul>.active{
background-color:green;
}
</style>
</head>
<body><nav>
<ul class="nav-main">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav-main li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).parent().addClass("active");
}
if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
$(this).parent().addClass("active");
}
})
});
</script>
</body>
</html>
Save the above code as index.php or about.php or contact.php and check the output.

Related

How to add active class on specific li on user click after page load using JavaScript

I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class. I have menu items like the following:
$(document).ready(function () {
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
alert(pgurl);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
$(this).addClass("active");
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-9">
<nav class="nav-holder">
<div class="nav-footer">
<ul class="nav" id="navclk">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Car Rentals
</li>
<li class="">
Wedding Cars
</li>
<li class="">
Tempo Travellers
</li>
<li class="">
Tour Package
</li>
<li class="">
Coach
</li>
<li class="has-submenu">
Places
<ul class="submenu">
<li>Bhubaneswar</li>
<li>Puri</li>
<li>Konark</li>
<li>Chilika</li>
<li>Gopalpur</li>
<li>Cuttack</li>
<li>Bhitar Kanika</li>
<li>Daringbadi</li>
<li>Jajpur</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
It's not working with the drop-down menus while working perfectly with all other menus not having drop-down items. How can I change the code that it works too with menu items having a drop-down list of items? I am also using update panel on my page.
This could be done by the following code
CSS
.active {
/* your active CSS */
}
html
<ul>
<li onclick="activeMe(this)">1</li>
<li onclick="activeMe(this)">2</li>
<li onclick="activeMe(this)">3</li>
<li onclick="activeMe(this)">4</li>
</ul>
JavaScript
function activeMe(li) {
console.log(li.setAttribute("class", "active"));
}
``
Correct Answer!
<!--Menu Active-->
<script type="text/javascript">
$(document).ready(function () {
$('.nav li').removeClass('active');
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).closest('li').addClass("active");
}
})
});
});
</script>
<!--Menu Active-->

Add/remove class/id to nav when scrolling to that posistion

right now i have this code to indicate on the nav links what id i am on.
But how can i also add a scroll function, if i scroll down to specific id then add the class to the right nav link. Thank you.
$(window).load(function(){
$("nav.site-nav ul.open.desktop li a").click(function() {
$('.current_yes').removeClass('current_yes');
$(this).addClass("current_yes");
});
});
jQuery(document).ready(function($){
var url = window.location.href;
$('nav.site-nav ul.open.desktop li a').filter(function() {
return this.href == url;
}).closest('a').addClass('current_yes');
});
and the nav look like this:
<div class="wrapper">
<nav class="site-nav">
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul class="open desktop">
<li><a id="link1" href="index.php#"><i class="site-nav--icon"></i>Hem</a></li>
<li><a id="link2" href="index.php#products-anchor"><i class="site-nav--icon"></i>Produkter</a></li>
<li><a id="link3" href="index.php#uthyres-anchor"><i class="site-nav--icon"></i>Uthyres</a></li>
<li><a id="link4" href="#rent"><i class="site-nav--icon"></i>Kontakta</a></li>
</ul>
</nav>
</div>
The css for current link:
.current_yes {
border-bottom: 2px solid #732813;
}

Menu is initially open on page load, should be closed until clicked

This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>
$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>
You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

Change active navbar link when using JQUERY Load

I have a navigation bar which is being loaded into each of my pages using a JQUERY '.load'
However, the active link will be different for each page. Is there a way i can override the active link from the page that has loaded the Navbar?
Any help would be much appreciated :)
Below is an example of the Navbar links
<nav class="navbar navbar-toggleable-sm">
<button type="button" data-toggle="collapse" data-target="#mai-navbar-collapse" aria-controls="#mai-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up collapsed">
<div class="icon-bar"><span></span><span></span><span></span></div>
</button>
<div id="mai-navbar-collapse" class="navbar-collapse collapse mai-nav-tabs">
<ul class="nav navbar-nav">
<li class="nav-item parent open"><span class="icon s7-home"></span><span>Training</span>
<ul class="mai-nav-tabs-sub mai-sub-nav nav">
<li class="nav-item"><span class="icon s7-monitor"></span><span class="name">Written Guides</span></li>
<li class="nav-item"><span class="icon s7-video"></span><span class="name">Video Guides</span></li>
</ul>
</li>
<li class="nav-item parent"><span class="icon s7-users"></span><span>Support</span>
<ul class="mai-nav-tabs-sub mai-sub-nav nav">
<li class="nav-item"><span class="icon s7-id"></span><span class="name">Signing Up</span></li>
<li class="nav-item"><span class="icon s7-search"></span><span class="name">FAQS</span></li>
</ul>
</li>
</ul>
</div>
</nav>
JQUERY
<script>
$(function(){
$("#nav-placeholder").load("../../navbarL1.aspx");
$('.dropdown-toggle').dropdown()
});
</script>
Try to run this code. I hope it will work.
function getURL() {
// get the whole URL
var currentURL = window.location.href;
// get the file name after = sign
var activeTemplate = currentURL.substr(currentURL.indexOf("=") + 1);
// add active class to url
$('a[href="/teams/Training/sitepages/training/'+ activeTemplate +'"]').addClass('active');
})
You can use .toggleClass() with a toggle state value as the second param. At that point it's a matter of figuring out how to compare the href with the current URL. You can use location.pathname, but you may want to get the href using getAttribute so it doesn't include the hostname. Otherwise you could also use this.href === location.href. It is important, however, to include this code in a callback to .load() so you don't encounter a race condition.
$(function(){
$("#nav-placeholder").load("../../navbarL1.aspx", function(){
$('.mai-sub-nav li a').each(function(){
$(this).toggleClass('active', this.getAttribute('href') === location.pathname);
})
});
$('.dropdown-toggle').dropdown()
});
You have to follow this kind of technique to achieve that
Here is my nav bar
<ul class="nav navbar-nav">
<li class="active" data-pos="1">
Home
</li>
<li data-pos="2">
About Egypt
</li>
<li data-pos="3">
Accomodation
</li>
<li data-pos="4">
Nile Cruises
`enter code here`
</li>
<li data-pos="5">
Tour Packages
</li>
<li class="dropdown" data-pos="6">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">FAQ</span>
</a>
<ul class="dropdown-menu">
<li>Thing to do</li>
<li><a href="{{ route('site.page',['travel-tip']) }}">How to travel</a</li>
<li>Travel Help</li>
</ul>
</li>
</ul>
Here is my script logic in which i get full url and spilt on the base of '/' seprator
to get an array and check second last and last segment
var url = window.location.href;
var urlArray = url.split("/");
var lastUrlString = urlArray[urlArray.length-1];
var pageName = urlArray[urlArray.length-2];
After getting last and second last segment i loop through navbar li elements and add or remove class on the basis of page names
var navLinks = $('ul.nav li');
navLinks.each(function(index,element){
var position = $(element).data('pos');
if(lastUrlString == 'home')
{
if($(element).data("pos") == 1)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'about')
{
if($(element).data("pos") == 2)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'accomodation')
{
if($(element).data("pos") == 3)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'nile_curises')
{
if($(element).data("pos") == 4)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else if(lastUrlString == 'page' && pageName == 'tour_packages')
{
if($(element).data("pos") == 5)
{
if(!$(element).hasClass("active") )
{
$(element).addClass('active');
}
}
else
{
$(element).removeClass("active");
}
}
else
{
$(element).removeClass("active");
}
});

need to disable fadeout function for the dropdown (only) menu

I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});
Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>

Categories