Jquery :: Keep Active Page Highlighted In Navigation Menu On Rollover
Oct 25, 2011
I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...
Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>
<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.
View 9 Replies
ADVERTISEMENT
May 27, 2011
I've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;
[Code]...
View 1 Replies
View Related
May 26, 2011
I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?
In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;
Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}
And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>
View 1 Replies
View Related
Apr 18, 2010
I am not terribly familiar with Javascript but i am looking forward to learning, and currently the problem I am facing is this:I have an a file being included to an .shtml document, that serves as my navigation, the code is like this:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
[code]....
View 12 Replies
View Related
May 8, 2009
I am trying to figure out whether or not there is an effective way to cut up the navigation on the right side of this banner so I can use the standard image swap. I am asking in this forum because I need to know if this will even work in the first place.
View 4 Replies
View Related
Mar 8, 2010
I created an accordian menu which includes categories, sub categories and sub sub categories. Once you hover(css) on one of the menu options there is a hovering effect. What i would like to achieve now is that once a menu option is chosen that option remains highlighted (:active) until another menu option is chosen.
View 3 Replies
View Related
Jun 12, 2009
i'm using a great script from oreilly for an efficient rollover effect on an image map - highly recommend for anyone needing something like this - link is below - my question is how do i modify it so the menu item *stays* highlighted when the page is selected? that is, in the example, if you rollover or click 'home', the image changes, but once you select it, the effect goes away. i've tried a few things but am getting bogged down as to the best approach. [URL]
View 9 Replies
View Related
Mar 30, 2009
I'm currently trying to get the tabs on a multi-script navigation to stay highlighted while you select a link from the sub-nav. [uRL]. I'm unsure of how to do this, or what js file I would have to edit (if any). The hover is run through jQuery 1.2.6 min but the sub-nav is run through dynamic drives' ddtabmenu.js.
View 5 Replies
View Related
Sep 13, 2010
I have a simple superfish menu on my site and I'm wondering if there is a way to add a quick line that shows the 'current' page the menu is point to?
this is a wordpress site, I noticed an example [URL] i'm getting closer?!
View 1 Replies
View Related
Oct 9, 2011
I would like to get an active menu but when my page reload i loose the class.
With a button it works fine but not when the page reload with a href it only works when i add a #.
View 3 Replies
View Related
May 19, 2011
I'm trying to use the cookie plugin to remember the state of a navigation menu from page to page. Here is the snippet of code from towards the top of my page where I am including the jquery files and cookie plugin. The second part of the sample tries to determine whether the cookie exists.
[Code]....
View 1 Replies
View Related
Dec 18, 2010
I am attempting to set it so that upon clicking a link within this Joomla site (from the navigation menu), the link will become bold. I have already implemented CSS for ".active" and set the "LI" class to 'active' to the first class.
I have done a search for the JQuery code to do this, but each example that I tried did not work at all. The class remained to be on the first link, home.
[Code]...
View 1 Replies
View Related
Sep 12, 2009
I am trying to add a class to my menu for the page it is currently on.
I followed this example: [url]
But I am not able to make it work at all.
Here is my HTML:
To make the nav element highlighted, the list item must have a class of 'hover' like this '<li class="hover">...'
And here is my jQuery:
The script is not applying any CSS to the list elements. I tried different combinations, tried to add a class to the a element by removing parent(), but nothing is triggering.
View 1 Replies
View Related
Nov 17, 2010
It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item.I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state.
View 1 Replies
View Related
Aug 11, 2011
I am trying to develop a jquery based keyboard navigation for my new project.....
My code:
But the problem i face is that when my active link goes to first element of unordered list and then i press up arrow key, then i lose track of my active link...
View 3 Replies
View Related
Oct 2, 2010
how to improve a simple javascript code on my web site. The left navigation menu slides down as you scroll the page. It works perfect on the computer I'm using now with IE8, Google Chrome and Firefox on Windows 7. However when I try it on any other computer with IE8 or another browser, when you reach the bottom of the age the menu continues to scroll thereby creating white space.
[Code]...
View 1 Replies
View Related
Oct 18, 2010
I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got. I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text. I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code:
This is the CSS;
Copy code
ul, li {
margin: 0;
padding: 0;
} #line {
width:auto;
height:15px;
position: absolute;
z-index: 1;
top: 35px;
float:right; .....
This is the Jquery;
Copy code
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 2000,
color : 'none',
easing : 'easeOutExpo'
}, options); .....
View 6 Replies
View Related
Aug 20, 2011
I am having a bit of trouble attempting to get this button roll over stuff working. I have looked up some really simple code to create a image rollover action for my navigation buttons. But nothing happens when I hover on any of the buttons though. When I use firebug to figure out what is wrong, it says that $(this) is the document and not the image button. The example/preview is here: [URL].
This is the jQuery code here for quick reference:
<script type="text/javascript">
$(document).ready(function(){
$('#navigation img').hover(
function() {
$(this).src = $(this).src.replace("Red","Yellow");
}, function() {
$(this).src = $(this).src.replace("Yellow","Red");
}); });
</script>
View 3 Replies
View Related
Jul 26, 2009
I'm quite new to web design and Javascript in particular. How to resolve a problem with the navigation bar in a website I am currently working on. The navigation bar has 3 main categories and there is an 'active' state so the page currently viewed is shown as grey underline text in the navigation bar. The thing is, I also have sub-categories that are not included in the navigation bar but I'd like to make it so the sub-category page currently being viewed makes the main category to which it is attached showing as 'active' in the navigation bar.
This is the structure of my site:
index.html
contact.thml
illustration
index.html
illustrationproject1.html
illustrationproject2.html
illustrationproject3.html
photography
index.html
photography1.html
photography2.html
So for example, if I'm in illustrationproject1.html, the Illustration tab in the navigation bar should be on the active state. This is the code I have so far:
Navigation Bar:
[CODE]
<ul id="nav">
<li class="nav_item"><a href="illustration/index.html">Illustration</a></li>
<li class="nav_item"><a href="photography/index.html">Photography</a></li>
<li class="nav_item"><a href="design/index.html">Design</a></li>
<li class="nav_item"><a href="stories/index.html">Stories</a></li>
<li class="nav_item"><a href="profile.html" title="Profile">Profile</a></li>
<li class="nav_item"><a href="contact.html" title="Contact">Contact</a></li>
<li class="nav_item"><a href="links.html" title="Links">Links</a></li>
</ul>
[ICODE]
This is the Javscript for the active state:
[CODE]
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}}}
[ICODE]
So this code is working but I'm just not sure how to apply it to the subcategories as well. I can see what I should do, write some "if" statement but I don't enough of Javascript yet for this...
View 2 Replies
View Related
Mar 30, 2011
I'm working on a website and am having trouble figuring out where I can add/edit the text for the navigation buttons, HOME, ABOUT, CONTACT, etc. There is a rollover.js file and the rollover effect works fine, I just can't figure out where to put the text for the navigation buttons and after a week of trying different things I thought I'd come here and try to get it working. My meager JS knowledge isn't enough. I started this website from a template in case you're wondering. Here's some of the code starting with where the images are preloaded then a few lines farther on are the onmouseover and onmouseouts.
<body id="page_1" onload="MM_preloadImages('images/bt_2_sel.jpg','images/bt_3_sel.jpg','images/bt_4_sel.jpg','images/bt_5_sel.jpg')">
<div class="main">
<!--==========header=========== -->[code].....
Are the mousseovers DHTML and not js I assumed they were js and were connected by the external rollover.js file.
View 2 Replies
View Related
May 6, 2010
How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: [URL]
Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row.
View 2 Replies
View Related
Apr 11, 2010
I'm trying to add .active class to a menu, based on the URI. It works with URL's like: /, /products, /about, /contact but not anymore when you go to /products/some-product.I know what's wrong, but I can't find a working solution. I've tried a regex, but that didn't work either...
The code:
$(function() {
var path = location.pathname;
if (path) {
[code]....
View 4 Replies
View Related
Aug 16, 2011
I'm creating an accordion menu and need to make the link you click on go from saying "click here to view" to "close". The way I had to set up the accordion is making finding code that works very difficult. Here is my [code]...
View 4 Replies
View Related
Sep 13, 2009
I'm using superfish for a drop down hover menu. It works perfect except I would like the sub menus to remain visible when one of the <a> tag from the menu has class="active". Here is a quick overview of the menu html:
<ul class="primary-links">
<li>
<a href="main">item parent 1</a>
<ul>
[Code]....
If the current page is main -- class='active' is automatically added to the A tag (with Drupal). If you are currently in page2, the class='active' is added to the A tag of the sub-menu. Now, how can I get the sub menu to be always displayed -- regardless of superfish, either when item parent 1 A tag is set as class='active'of the item child A tag is set as class='active'.
View 1 Replies
View Related
Jun 24, 2010
I'm almost done customizing the Superfish jQuery menu to fit my web site theme. I have all of the menu hover and submenu hover styles in place, but I'm having a problem with the color of the top-level menu item's font when the submenu is expanded. The active top menu item's background matches the hover color, but when I hover overa submenu item, the font color reverts back to the original (non-hovered) color. How do I get the top level menu item's color to match its hover color when the submenu is expanded?
The relevant portions of my CSS are as follows:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#8C1C39;
}.sf-menu a.sfHover {
color:#FFFFFF;
}.sf-menu li {
background:transparent;
}.sf-menu li li {
background:#FFFFFF;
}.sf-menu li li li {
background:#9AAEDB;
}.sf-menu li:hover, .sf-menu li a:hover {
color: #FFFFFF;
background:#00207B;outline:0;
}.sf-menu a:focus, .sf-menu a:active,
.sf-menu li li a:hover, .sf-menu li.sfHover {
background:#8C1C39;
color: #FFFFFF;
outline:0;
}
Attachments
TopHover.jpg
Size : 10.86 KB
Download : 505
SubHover.jpg
Size : 9.33 KB
Download : 510
View 1 Replies
View Related
Mar 9, 2011
i'm using this script below that highlights the current link clicked. My site is a horizontal scrolling site so the links just redirect to different parts of the page.My problem is is that when the page is refreshed the current link is forgotten and the home link is highlighted, even though the page stays in the right place. Is there a way to keep the current link highlighted?
View 6 Replies
View Related