I want to put this nav bar on my website, here is the demonstration page: http://insicdesigns.com/demo/css3/exp1/index.html it uses JavaScript, jQuery, and CSS
The problem is, on my site I use PHP and a index.php?page=home, ?index.php?page=contact, etc. And I can't figure out how to set an item on the bar as "active" [it defaults to "Home"]. I looked into the code, and I found out that the first <li> [the Home] has class="active". I tried simply moving the class to the second item, ["About"] but that just screws everything up, by moving the whole animation to the right which does not work as it is meant to. So on the .click(), this is how it sets an item active:
$(this).siblings('li').removeClass('active'); // removes active
$(this).addClass('active');
So I put id="target" on another item, and with Chrome's JS Console I type in the same code, except I use "#target" instead of "this"
But nothing immediately changes. I have to hover over the bar, for the animation to start, look for the active item, and move the animation over there. Right now, if I use this to replace my current nav bar [which is here], and if someone goes to index.php?page=contact
I can't make the About link active so that the user knows they're on the About
page!
So here is my question: Is there a way to tell jQuery I just hovered, from some code? [fool it] something like:
$("#target").fakeEvent("hover");
So that it runs the code [which, btw, is attached to a function(){} inside a $(selector).hover() -- look at the lavalamp.js file on the example]? If you can help, I'd really appreciate 开发者_如何学JAVAit! Thanks :)
Well, hover
consist of two events, mouseenter
and mouseleave
.
You can trigger the mouseenter
event with:
$("#target").mouseenter();
Answer: http://jsfiddle.net/morrison/4CU4H/
Notes on answer:
- The fancy menu uses poor JavaScript. I have adapted the script to fix some bugs as well as optimize performance. Use my JavaScript instead of theirs.
- To get the active class in the correct position on page-load, simply apply the active class where you would like before jQuery is called. You should probably set the active class in your php output. This also allows for nice style degradation when JavaScript won't load.
- The plug-in disables clicking because it's an example. You'll probably want to remove the return statement in the click function.
Notes on your website:
- Hide your queries. This isn't a hard rule, but in your case you should.
http://www.macdonaldfamilysingers.com/?page=contactindex.php?page=contact
should behttp://www.macdonaldfamilysingers.com/contact/
. Here's a tutorial on url rewriting. - You'll probably want to beautify your tables. By removing some of the borders and spacing, it'll also take up less visual space.
精彩评论