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!
Activating Menu
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
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");
}
});
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Do you have javascript errors?
Because if the first regex execution doesn't find anything, getting the first item will throw an error.
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];
Ah, I just had a closer look at your CSS, I think you're not setting the active class correctly.
Should be:
Should be:
#nav ul li.active {
border-bottom:3px #FFF solid;
background-color:#a51d43;
}
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.
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.
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
but
when I submit the page to itself
AddRule.cfm?id=51 -> now this does not work because it has id=51
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>
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?
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?
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
it will not highlights.
AddRule.cfm?id=51 -> it will not highlights
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");
}
AddRule.cfm?id=51 -> it will not highlightsIt won't - you are testing your URL against the href of the link
AddRule.cfm?id=51 is not equal to AddRule.cfm
var UrlParts = window.location.pathname.split( '/' );
var url = UrlParts[UrlParts.length -1];
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];
Premium Content
You need an Expert Office subscription to comment.Start Free Trial