Activating Menu

lulu50
lulu50 used Ask the Experts™
on
Hi,

I have a menu, when the user click on the menu it should get a background color to #a51d43

this is what i have and it's not working

#nav ul li a {
 /* margin:10px; */
    color:#FFF;
 /* padding:4px;
    font-size:20px;
    text-decoration:none; */
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
 	background-color:#000000;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }



    <menu id="nav">
    <ul class="categories" style="font-size:12px;color:#ffffff;">
      <li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
      <li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
      <li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
    </ul>
    </menu>





$(document).ready(function () {
	$.ajaxSetup({ cache: false });
	
	var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

    // passes on every "a" tag 
    $("#nav ul li a").each(function() {
            // checks if its the same on the address bar
        if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) { 
            $(this).closest("li").addClass("active");
        }
		else if(url == "Index.cfm"){
			$(".Alert").closest("li").addClass("active");
		}
		else if(url == "AddRule.cfm"){
			$(".Alert").closest("li").addClass("active");
		}

		
    });

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Alexandre SimõesManager / Solutions Architect

Commented:
Do you have javascript errors?

Because if the first regex execution doesn't find anything, getting the first item will throw an error.
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Check the dev tools to see if you have javascript errors.

Author

Commented:
no I am not getting any error
Manager / Solutions Architect
Commented:
Ah, I just had a closer look at your CSS, I think you're not setting the active class correctly.
Should be:
#nav ul li.active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }

Open in new window

I removed the space between the li and the .active.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Alexandre

yes, that is correct that I had the active CSS wrong

but when I submit the form to itself I lose my active style

so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.

Author

Commented:
if the url is this -> AddRule.cfm -> it works fine

but

when I submit the page to itself

AddRule.cfm?id=51  -> now this does not work because it has id=51
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Where is your code showing the submit?

Author

Commented:
oh it goes to SubmitRule.cfm for an insert than go back to the same page that's when I lose my menu.



<FORM id="UnitTestingFrm" NAME="UnitTestingFrm" METHOD="POST" ACTION="SubmitRule.cfm?id=<cfoutput>#PID#</cfoutput>">

   <button name="SubRule" id="SubRule" type="submit" style="border: 0; background: transparent;cursor:pointer;" >
    <img src="images/NextBtn.jpg" alt="Next" />
	</button>

</FORM>

Open in new window

Alexandre SimõesManager / Solutions Architect

Commented:
Let me see if I get it right:

So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.

is that it?

Author

Commented:
If I click on the menu it will highlights but if I add (id=51) in the URL and click on enter
it will not highlights.

AddRule.cfm?id=51 -> it will not highlights
Alexandre SimõesManager / Solutions Architect

Commented:
Ok, so what you need should be something like:
        if (url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
            $(this).closest("li").addClass("active");
        } else if (window.location.href.indexOf("Index.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        } else if (window.location.href.indexOf("AddRule.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        }

Open in new window

If it works it should still be optimized, but for the time being it's enough just to test.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
AddRule.cfm?id=51 -> it will not highlights
It won't - you are testing your URL against the href of the link

AddRule.cfm?id=51 is not equal to AddRule.cfm

Open in new window

You need to strip out the filename from the URL like so

  var UrlParts = window.location.pathname.split( '/' );
  var url = UrlParts[UrlParts.length -1];

Open in new window

Try that instead of
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Author

Commented:
Alexandre   and  Julian  Thank you both for all your help

IT WORKS :-)  

THANK YOU THANK YOU AND ONE MORE THANK YOU

Thanks,
lulu

Author

Commented:
one more time THANK YOU LOL
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are most welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial