[RESOLVED] Navigation Bar Help

@Juicey27Apr 27.2016

UTILIZING: MICROSOFT WEBMATRIX 3
UTILIZING EXTERNAL CSS AND JAVASCRIPT FILES

Need help with a Horizontal Navigation Bar – that has a ACTIVE/CURRENT NAVIGATION LINK I am unable to get this to work. I have the navigation bar that works just fine, I am unable to get the ACTIVE/CURRENT LINK to work. So basically, when a user is on a certain page, the tab corresponding to that page, highlights in a color, so that the user knows what page they are on. This is the code I have: ((Please reply and let me know if you need anymore information!!)) Thanks so much in advance.

~~[B]~~CSS Code:[/B]

ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

ul#menu li {
float: left;
}

ul#menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li#menu a:hover:not(.active) {
background-color: #111;
}

#menu .active {
background-color: #4caf50;
}

~~[B]~~JavaScript Code:[/B]

document.getElementById(“nav01”).innerHTML =
“<ul id=’menu’>”
“<li><a class=’.active’ href=’index.html’>Home</a></li>”
“<li><a href=’contact.html’>Contact</a></li>”
“<li><a href=’about.html’>About</a></li>”
“<li><a href=’services.html’>Services</a></li>”
“</ul>”;

to post a comment

CSS

6 Comments(s) _↴

@jedaisoulApr 29.2016 — #Hi and welcome to the site. I'm not a JS expert but I'd try changing: "<a class='.active'..." to "<a class='active'...". I hope this helps.

@Juicey27authorMay 03.2016 — #System in Use: Microsfot WebMatrix3

Code: HTML, CSS, Javascript (external)

Ok, So i have a new problem. i have made some changes to my code and have everything working. EXCEPT: I am still unable to get the active/current highlight to work on my navigation bar. I can get the code to work so that one tab works and highlights, but remains static, and it does not change when clicking on any other next tab. I have googled much and read many forums. I am super glad that I have gotten the code to work better and just the way i want it to, but this last part it bringing things to a halt. Whatever information tips, tricks, or sompliy pointing me in the right direction (which I prefer) as I need to learn, would be much appreciated. My current code is listed below. If you need more info please do not hesitate to ask!! Thanks everyone in advance.

CSS Code:

ul#menu {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #808080;

position: fixed;

top: 0;

}

ul#menu li {

float: left;

}

ul#menu li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul#menu li a:hover:not(.active) {

background-color: #ef5959;

}

ul#menu .active {

background-color: #ff6a00;

}

Javascript Code:

document.getElementById("nav01").innerHTML =

"<ul id='menu'>" +

"<li><a href='index.html'>Home</a></li>" +

"<li><a href='services.html'>ProSet Services</a></li>" +

"<li><a href='aboutus.html'>About ProSet</a></li>" +

"<li><a href='contact.html'>Contact ProSet</a></li>" +

"<li><a href='photo.html'>Photo Gallery</a></li>" +

"<li><a href='references.html'>Notable Clientele</a></li>" +

"<li><a href='payments.html'>Accepted Payments</a></li>" +

"<li><a href='social.html'>Social Media</a></li>" +

"<li><a href='mia.html'>ProSet PSA</a></li>" +

"</ul>";

If I add class='active' to any of the above <li> it only highlights that particular one. If I add class='active' to all, it highlights all of the <li>.

HTML:

<html lang="en">

<head>

<meta charset="utf-8" />

<title>About Us</title>

<link href="site.css" rel="stylesheet">
  </head>
  <body>
  <nav id="nav01"></nav>

@ZorgMay 04.2016 — #Basically i created a js function that takes the current page from the [I]window.location.pathname[/I] and adds the [I]active[/I] css class name attribute to its alink, only if it matches one of the [I]links object [/I] page names. I commented the code to help explain further. Hope this helps.

Replace your JS with this:

[CODE]// everytime page refreshes we check the url outside the function
 var page = window.location.pathname.substring(location.pathname.lastIndexOf("/") + 1); // get the current page by removing everything before last '/' in url pathname
 
 // created a function to handle navigation
 function mainNav(page){
 // object holding page names and text names, add or change page names here and their texts, exclude http and directories
 var links = {
 'Home'                : 'index.html',
 'ProSet Services'   : 'services.html',
 'About ProSet'       : 'aboutus.html', 

 'Contact ProSet'    : 'contact.html' 

 'Photo Gallery'      : 'photo.html' 

 'Notable Clientele' : 'references.html' 

 'Accepted Payments' : 'payments.html' 

 'Social Media'      : 'social.html' 

 'ProSet PSA'        : 'mia.html' 

 }, 
 menu  = document.createElement('ul'), // create ul element
 nav    = document.getElementById("nav01"); // get nav01 div
 
   menu.setAttribute('id', 'menu'); // set ul id for css
 
   // loop thru each item in the links object and create the li and alink elements
   Object.keys(links).forEach(function(key) {
 
   var li  = document.createElement('li'), // create li
   a   = document.createElement('a'), // create alink
   tn  = document.createTextNode(key); // alink text
 
   a.setAttribute('href', links[key]); // set the href from links object
   a.appendChild(tn); // append the alink text
 
   // now if the page passed into this function is equal to the links object page, set class to active
   if(page === links[key]){
   a.setAttribute('class', 'active'); // add active
   }
 
   li.appendChild(a); // append alink to li 
   menu.appendChild(li); // append li to ul
   });
   nav.appendChild(menu); // append ul to nav01
  }
 
  // after dom is ready, call the function and pass in the current page
   mainNav(page);
 
 [/CODE]

System in Use: Microsfot WebMatrix3

Code: HTML, CSS, Javascript (external)

Ok, So i have a new problem. i have made some changes to my code and have everything working. EXCEPT: I am still unable to get the active/current highlight to work on my navigation bar. I can get the code to work so that one tab works and highlights, but remains static, and it does not change when clicking on any other next tab. I have googled much and read many forums. I am super glad that I have gotten the code to work better and just the way i want it to, but this last part it bringing things to a halt. Whatever information tips, tricks, or sompliy pointing me in the right direction (which I prefer) as I need to learn, would be much appreciated. My current code is listed below. If you need more info please do not hesitate to ask!! Thanks everyone in advance.

CSS Code:

ul#menu {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #808080;

position: fixed;

top: 0;

}

ul#menu li {

float: left;

}

ul#menu li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul#menu li a:hover:not(.active) {

background-color: #ef5959;

}

ul#menu .active {

background-color: #ff6a00;

}

Javascript Code:

document.getElementById("nav01").innerHTML =

"<ul id='menu'>" +

"<li><a href='index.html'>Home</a></li>" +

"<li><a href='services.html'>ProSet Services</a></li>" +

"<li><a href='aboutus.html'>About ProSet</a></li>" +

"<li><a href='contact.html'>Contact ProSet</a></li>" +

"<li><a href='photo.html'>Photo Gallery</a></li>" +

"<li><a href='references.html'>Notable Clientele</a></li>" +

"<li><a href='payments.html'>Accepted Payments</a></li>" +

"<li><a href='social.html'>Social Media</a></li>" +

"<li><a href='mia.html'>ProSet PSA</a></li>" +

"</ul>";

If I add class='active' to any of the above <li> it only highlights that particular one. If I add class='active' to all, it highlights all of the <li>.

HTML:

<html lang="en">

<head>

<meta charset="utf-8" />

<title>About Us</title>

<link href="site.css" rel="stylesheet">
  </head>
  <body>
  <nav id="nav01"></nav>[/QUOTE]

[CODE]// everytime page refreshes we check the url outside the function
 var page = window.location.pathname.substring(location.pathname.lastIndexOf("/") + 1); // get the current page by removing everything before last '/' in url pathname
 
 // created a function to handle navigation
 function mainNav(page){
 // object holding page names and text names, add or change page names here and their texts, exclude http and directories
 var links = {
 'Home'                : 'index.html',
 'ProSet Services'   : 'services.html',
 'About ProSet'       : 'aboutus.html', 

 'Contact ProSet'    : 'contact.html' 

 'Photo Gallery'      : 'photo.html' 

 'Notable Clientele' : 'references.html' 

 'Accepted Payments' : 'payments.html' 

 'Social Media'      : 'social.html' 

 'ProSet PSA'        : 'mia.html' 

 }, 
 menu  = document.createElement('ul'), // create ul element
 nav    = document.getElementById("nav01"); // get nav01 div
 
   menu.setAttribute('id', 'menu'); // set ul id for css
 
   // loop thru each item in the links object and create the li and alink elements
   Object.keys(links).forEach(function(key) {
 
   var li  = document.createElement('li'), // create li
   a   = document.createElement('a'), // create alink
   tn  = document.createTextNode(key); // alink text
 
   a.setAttribute('href', links[key]); // set the href from links object
   a.appendChild(tn); // append the alink text
 
   // now if the page passed into this function is equal to the links object page, set class to active
   if(page === links[key]){
   a.setAttribute('class', 'active'); // add active
   }
 
   li.appendChild(a); // append alink to li 
   menu.appendChild(li); // append li to ul
   });
   nav.appendChild(menu); // append ul to nav01
  }
 
  // after dom is ready, call the function and pass in the current page
   mainNav(page);
 
 [/CODE]

@Juicey27authorMay 04.2016 — #Zorg - Thank you very much. Yes this works, which I am sure you knew it would. But thank you. This is so much more advanced than I am. I am still scrolling the internet, splicing together pieces of code, some things work, a lot of things do not, but I am learning. Using the "Learn to Code Online for Free programs" are getting me some foundation. But WOW. Thanks again. Much appreciated. If there is a way to properly give thanks, please advise. thanks

Basically i created a js function that takes the current page from the [I]window.location.pathname[/I] and adds the [I]active[/I] css class name attribute to its alink, only if it matches one of the [I]links object [/I] page names. I commented the code to help explain further. Hope this helps.

Replace your JS with this:

[CODE]// everytime page refreshes we check the url outside the function
 var page = window.location.pathname.substring(location.pathname.lastIndexOf("/") + 1); // get the current page by removing everything before last '/' in url pathname
 
 // created a function to handle navigation
 function mainNav(page){
 // object holding page names and text names, add or change page names here and their texts, exclude http and directories
 var links = {
 'Home'                : 'index.html',
 'ProSet Services'   : 'services.html',
 'About ProSet'       : 'aboutus.html', 

 'Contact ProSet'    : 'contact.html' 

 'Photo Gallery'      : 'photo.html' 

 'Notable Clientele' : 'references.html' 

 'Accepted Payments' : 'payments.html' 

 'Social Media'      : 'social.html' 

 'ProSet PSA'        : 'mia.html' 

 }, 
 menu  = document.createElement('ul'), // create ul element
 nav    = document.getElementById("nav01"); // get nav01 div
 
   menu.setAttribute('id', 'menu'); // set ul id for css
 
   // loop thru each item in the links object and create the li and alink elements
   Object.keys(links).forEach(function(key) {
 
   var li  = document.createElement('li'), // create li
   a   = document.createElement('a'), // create alink
   tn  = document.createTextNode(key); // alink text
 
   a.setAttribute('href', links[key]); // set the href from links object
   a.appendChild(tn); // append the alink text
 
   // now if the page passed into this function is equal to the links object page, set class to active
   if(page === links[key]){
   a.setAttribute('class', 'active'); // add active
   }
 
   li.appendChild(a); // append alink to li 
   menu.appendChild(li); // append li to ul
   });
   nav.appendChild(menu); // append ul to nav01
  }
 
  // after dom is ready, call the function and pass in the current page
   mainNav(page);
 
 [/CODE]

[/QUOTE]

@ZorgMay 04.2016 — #@Juicey27, just glad I helped out. I know how a problem can keep me up at night.

Most of what i learned, i learn online, too. Keep learning yo, keep adding skills to your tool box.

Also in #CSS _↴

horizontal CSS menus [RESOLVED] Links not clickable in IE 7 Combining CSS Hacks...

Success!

Help @Juicey27 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Navigation Bar Help

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴