Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rating: Thread Rating: 2 votes, 2.50 average.
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-23-2008, 01:18 AM   PM User | #1
shecky981
New to the CF scene

 
Join Date: Mar 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
shecky981 is an unknown quantity at this point
[jquery] smooth animation on sliding menu code tweak help

hi all, new to both this forum and jquery in general. here is my problem:

a very generous user at another forum donated his code to the community to make a sliding vertical menu using jquery. you can see his menu in action here: http://www.elarcadenoe.es/

his code for the menu is here:

Code:
$(document).ready(function()
{
	// First we hide all exhibitis

	$("#menu ul li.section-title").nextAll().hide();

	// then the active exhibit is showed

	$("#menu ul").each(function(){
	$(this).find("li.active").prevAll().nextAll().show();
	}); 
	
	//This is the toggle function

	$("#menu ul li.section-title").click(function(){
	$(this).nextAll().slideToggle("fast");
	});

});
it works quite well, however you notice as you click around his menu, it does not close sections as you open new ones, so you get a somewhat jerky feel when you click on a sublink to go into a project, all the menus abruptly close.

i am trying to figure out a way to have it so that (for example) if 'print' is open, clicking on 'screen' slides open 'screen' and slides closed 'print' at the same time.

i have been futzing with the code and i found that adding this last line (in bold):

Code:
$(document).ready(function()
{
	// First we hide all exhibitis

	$("#menu ul li.section-title").nextAll().hide();

	// then the active exhibit is showed

	$("#menu ul").each(function(){
	$(this).find("li.active").prevAll().nextAll().show();
	}); 
	
	//This is the toggle function

	$("#menu ul li.section-title").click(function(){
	$(this).nextAll().slideToggle("fast");

	$("#menu ul li.section-title").nextAll().hide(); 
	});

});
does close the open sections but does it very jerkily. since i am positive i am doing this tottally wrong, can someone please let me know what the correct line(s) of code would be to get the effect i want.

thanks much in advance!
shecky981 is offline   Reply With Quote
Old 03-24-2008, 11:07 PM   PM User | #2
harbingerOTV
Senior Coder

 
Join Date: Jan 2005
Location: Memphis, TN
Posts: 1,765
Thanks: 8
Thanked 123 Times in 121 Posts
harbingerOTV will become famous soon enough
Code:
	$("#menu ul li.section-title").click(function(){
	$(this).nextAll().slideToggle("fast");

	$("#menu ul li.section-title").nextAll().slideUp('fast'); 
	});
try that. What it appears is that he just said slide the currnet one down and just hide the rest, not applying any kind of transition to the effect.

there are a lot of jQuery accordians out there as well.

http://www.learningjquery.com/2007/03/accordion-madness
__________________
Stop making things so hard on yourself.
i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis
harbingerOTV is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:32 PM.


Advertisement
Log in to turn off these ads.