show current page on jQuery animated menu

Hi EE

Im using a jQuery animated menu on a small site and would like to be able to show the current
page by having the animated tab show in the down position rather than returning back to its default state after it has been clicked.

Im using jQuery 1.5.1, Easing 1.3

I have done some digging around  and found something called addcurrent, but my jQuery skills are limited and some assitance is grateful.

This is the testpage.
http://www.testing.meadcroft-nursery.co.uk/

If you need anything further from me just ask

Thanks Dan
$(document).ready(function(){
		
	//Remove outline from links
	$("#animatedNav a").click(function(){
		$(this).blur();
	});
	
	//When mouse rolls over
	$("#animatedNav li").mouseover(function(){
		$(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
	
	//When mouse is removed
	$("#animatedNav li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})


	});
	
});

Open in new window

Dan_LapodoAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
I think this is better (and way shorter ;)

Please
1) add the id="home" to the home link
2) notice that your "about us" has round corners for some reason
$(document).ready(function() {
  var pathname = window.location.pathname;
  var pathname = pathname.split('/');
  var currentActive = pathname[pathname.length-1];
  if (currentActive =="") currentActive="home"; // home page does not have a path

  $("#"+currentActive+"_li").addClass('active').stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})

  $("#animatedNav a").click(function() { // clicking the link
    // remove the active from previous click on the LI
    if (currentActive) $("#"+currentActive+"_li").removeClass("active");
    // add the active class to the parent LI - we are already animating
    currentActive = $(this).attr("id");
    $(currentActive+"_li").addClass("active");
    //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });

  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
You need to test for active and use this script

http://www.jessenicola.com/blog/jquery-set-active-links-current-url

Something like this - you need to give your links an ID, here the home link gets id="home"
I have not tested the script, but the idea is there
$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home"; 
   
   $("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });

  $("#animatedNav a").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });
  
  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if $(this).hasClass("active") return; // do not do anything on mouseover an active class
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
  
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 
Dan_LapodoAuthor Commented:
Thanks for the reply and supplying the link

Ok, Ive been spending a day or so now trying to get this script to work, but no joy, this is what I have for the menu, i added the ID to the a tag, and used the script you posted, is this correct?

 <div id="animatedNav">
      <ul>
      <li class="green">
      <p><a id="home" href="/">Home</a></p>
      <p class="subtext"><a href="/index.asp">back to the front page</a></p>
            </li>
      <li i class="yellow">
      <p><a id="aboutus" href="/about-us/">About</a></p>
      <p class="subtext"><a href="/about-us/">about Meadcroft Nurseries</a></p>
            </li>
      <li class="red">
      <p><a id="nursery" href="the-nursery">The Nursery</a></p>
      <p class="subtext">Get in touch</p>
            </li>
      <li class="blue">
      <p><a id="benefits" href="the-benefits">Benefits</a></p>
      <p class="subtext">what makes us different</p>
            </li>
      <li class="purple">
      <p><a id="contact" href="contact-us">Contact</a></p>
      <p class="subtext">contact us for more</p>
            </li>
      </ul>

    </div>

Is there anything else that needs to be added to the script? I had started looking at CSS solution in maybe changing the active state... some more guidance is needed I feel!
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Michel PlungjanIT ExpertCommented:
What I posted IS a sort of CSS solution

Do you have the test page somewhere? The page you posted does not have my code on it
0
 
Dan_LapodoAuthor Commented:
test page: http://www.testing.meadcroft-nursery.co.uk/

From what ive read your script gets the URL of the page, so do the file or folder name need to be named identically to that of the ID?

I also found this, but wasn't sure how to implement it, maybe it would be usefull?

http://stackoverflow.com/questions/302955/active-navigation-with-jquery-cant-apply-a-default-class-to-anchor
0
 
Michel PlungjanIT ExpertCommented:
So my script gave the link active.
Now just DO something with the active link :)

So

$("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
        $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
      }
   });

0
 
Dan_LapodoAuthor Commented:
Ok I've tried that and still no joy, I think I see the problem though but dont know how to solve it.

The onclick is attached to the a tag, where as the animation is attached to the li. When you click the a link it moves the text down but doesnt activate the animation.

It also needs to remove the active state when another link is clicked as 'home' is constantly active.

I have left the test page with your script as it is so you can see what i mean.
0
 
Michel PlungjanIT ExpertCommented:
Can you try to change the a to li here

$("#animatedNav a").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });

  $("#animatedNav a").click(function(){
0
 
Dan_LapodoAuthor Commented:
I have changed them to li instead, now the home tag doesnt respond when the a tag is clicked, however if you click the li of any dropdown it does!

Here is how the script l;ooks at the moment.

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});


0
 
Michel PlungjanIT ExpertCommented:
My code blocks the currently selected menu item from animating.since I thought that was what you wanted. Is that what is happening now?
0
 
Dan_LapodoAuthor Commented:
No affraid not, can you explain this part, is it name dependent on the URL?

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1];
   if (currentActive =="") currentActive="home";


Do I need that my pages are named home.asp, contact.asp etc
0
 
Michel PlungjanIT ExpertCommented:
The active is dependent on the URL

I split on / and look at the last one

If there is none, I call it home since you have http://www.testing.meadcroft-nursery.co.uk/
as home
But
http://www.testing.meadcroft-nursery.co.uk/about
would give an active page of "about" which means the ID needs to go on the LI and not on the link as
id="about"

HOWEVER I can do this:

var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

and you have have id="home_li", id="about_li"

on the LIs and keep the IDs of the links too

0
 
Dan_LapodoAuthor Commented:
So will it remove the extension ie about-us.asp, its still not playing ball....

this is the nav menu now,

      <ul>
      <li class="green">
      <p><a id="home" href="/">Home</a></p>
            </li>
      <li i class="yellow">
      <p><a id="about-us" href="about-us.asp">About Us</a></p>
            </li>
      <li class="red">
      <p><a id="the-nursery" href="the-nursery.asp">The Nursery</a></p>
            </li>
      <li class="blue">
      <p><a id="the-benefits" href="the-benefits.asp">The Benefits</a></p>
            </li>
      <li class="purple">
      <p><a id="contact" href="contact.asp">Contact Us</a></p>
            </li>
      </ul>


And the code;

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav a").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});
0
 
Michel PlungjanIT ExpertCommented:
Hmm I see only one of the changes from a to li. The second is still a') and I do not see the <li id="about_li"
0
 
Dan_LapodoAuthor Commented:
My apologies here is the ammended li;

$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var currentActive = pathname[pathname.length-1]+"_li";
if (currentActive =="_li") currentActive="home_li";

$("#animatedNav li").each(function(){
       var test = $(this).attr('id');
       if (test == currentActive){
         $(this).addClass('active');
       }
   });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
 
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});


And the navigation, I guess this is how you mean;

      <ul>
      <li id="home_id" class="green"><p><a href="/">Home</a></p></li>
      <li id="about-us_id" class="yellow"><p><a id="about-us" href="about-us.asp">About</a></p></li>
      <li id="the-nursery_id" class="red"><p><a id="the-nursery" href="the-nursery.asp">The Nursery</a></p></li>
      <li id="the-benefits_id" class="blue"><p><a id="the-benefits" href="the-benefits.asp">Benefits</a></p></li>
      <li id="contact-us_id" class="purple"><p><a id="contact" href="contact.asp">Contact</a></p></li>
      </ul>


There is still no change though, I hope im following your code correct?
0
 
Michel PlungjanIT ExpertCommented:
Not correct
home_li not home_id.
0
 
Dan_LapodoAuthor Commented:
replaced the _id with _li

still nothing!
0
 
Michel PlungjanIT ExpertCommented:
Ok I'll try later
0
 
Dan_LapodoAuthor Commented:
thank you for your help so far, it would be good to get it solved. I'll keep on trying though, maybe I'll get lucky with it. cheers again
0
 
Michel PlungjanIT ExpertCommented:
It was hard to see on my mobile. You forgot to call the animation and I did not realise I had to put the return in the mouseout too


$(document).ready(function() {
  var pathname = window.location.pathname;
  var pathname = pathname.split('/');
  var currentActive = pathname[pathname.length-1]+"_li";
  if (currentActive =="_li") currentActive="home_li"; 
  $("#"+currentActive).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})


  $("#animatedNav li").each(function(){
    var test = $(this).attr('id');
    if (test == currentActive){
      $(this).addClass('active');
    }
  });
  $("#animatedNav li").click(function(){
    if (currentActive) $("#"+currentActive).removeClass("active");
    $(this).addClass("active");
    currentActive = $(this).id;
  //Remove outline from links
    $(this).blur();
  });

  //When mouse rolls over
  $("#animatedNav li").mouseover(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
  
  //When mouse is removed
  $("#animatedNav li").mouseout(function(){
    if($(this).hasClass('active')) return true;
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  });
});

Open in new window

0
 
Dan_LapodoAuthor Commented:
Excellent, now its stopping the animation.. there is a glitch however.

When you are on the homepage thats fine, you click on the home a tag and it reloads the page, the animation is down, thats good.
On the rest of them the animation stops only when the li is clicked, not when the a is, this means that you can click the li on all of the tabs and they all stay down together and you cant reset them other than clicking another link.
Also when you click any other nav link the animation is in the default up position, its only home that is in the down position.
0
 
Michel PlungjanIT ExpertCommented:
Ok I'll look tomorrow. We can try moving it all to the link instead of the li and see if the event bubbles up
0
 
Dan_LapodoAuthor Commented:
Oh much better, thank you, the animation stops just where it should, I hate to say it but it only works on the home link, not on any of the others. Does your script remove the file extension, is there a way to test what value the other links give back when the url changes?
0
 
Michel PlungjanIT ExpertCommented:
Sorry, I did not notice you changed the actual urls. Missed the fact in one of the earlier posts
They used to be
/
/about
and so on.

Change this
  var currentActive = pathname[pathname.length-1];
to
  var currentActive = pathname[pathname.length-1].replace(".asp","");

0
 
Dan_LapodoAuthor Commented:
Works like a charm.. So if i wanted to use, var currentActive = pathname[pathname.length-1];

that would grab the folder name, and each file was index.asp etc

I can see how you earned the Genius status, thanks for your help, much appreciated!
0
 
Michel PlungjanIT ExpertCommented:
Thanks for the kind words. jQuery is not yet my strongest point, so this was a learning experience for me too.
I managed to cut down a lot of the script - I realised that I was doing a lot of work for a simple thing.

To answer your last item:

pathname[pathname.length-1];

will grab whatever is after the last /
so
/
would grab nothing (empty string)
/about
would grab
about
and
/about.asp
would grab
about.asp
which is why we need to remove the .asp to get just about.

0
 
Dan_LapodoAuthor Commented:
Excellent work, can't thank enough
0
 
Michel PlungjanIT ExpertCommented:
You are welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.