asked on

Accordion Menu

Hello - and thanks in advance.

I have a menu that i'm working on - it's this one:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

and on the submenus like where you see horizontal css menu and vertical css menu - i've been asked to make that have a semi transp background and rounded top right and bottom right corners.

I've included a picture. Fig 1. And a link, you can see what i'm trying to so here:
http://cowtowncruisers.com/pacos/pacos.html

I found this link:
http://kalsey.com/2003/07/rounded_corners_in_css/
in another post but don't know how to apply it since categoryitems is the class that those items are styled by isn't anywhere i can find to edit.

I do hope someone can help, and sorta quickly. Thanks again in advance.

~H~

Fig 1:
http://cowtowncruisers.com/img/sample_menu.jpg

john chambers

ASKER

Did i upset someone? I could really use some help on this issue here. Please please please pleaaaaaase?!

agrublev

Hey how much do you care about Internet Explorer support? Because this could easily be achieved with CSS3 which is only supported in IE8 and every other browser online... so if you are interested i can tell you how to do it with css3 and it will be really straight forward.

john chambers

ASKER

wow - thanks for responding - i wish i could 86 ie - but it has to at least run in ie7. Any ideas? Thanks again for responding - hope to resolve this sooner rather than later.

SOLUTION

agrublev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

john chambers

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

john chambers

ASKER

This was way more than i thought....... this was massive. Had to use jquery and css. it's still not perfect and there are still a few bugs but it'll help folks get the general idea. Thanks for your help Agrubley!! Very much appreciated.

var currentSideNav = '';
 
$(document).ready(function(e){
	initialize();
}
);
 
//put click function on all class ddheader
function bindFunctions(){
	$('.ddheader').each(
		function(i) {
			var id = $(this).attr("id");
			$(this).bind("click", function(e){
				runFlyOut(id)
			});
		}
	);
}
 
function closeAllMenuItems(){
	$('.ddcontent').hide();
}
 
function initialize(){
	closeAllMenuItems();
	bindFunctions();
}
 
function runFlyOut(id){
	var clickedID = id.replace('-ddheader','');   //strip ddheader off of id for use with content
	var currentID = currentSideNav.replace('-ddheader','');
	
	if (currentID == clickedID){					
		$('#'+currentID+'-ddcontent').toggle('fast');
		$('#'+currentSideNav).toggleClass('active');
		currentSideNav = '';
	}
	else{
		if (currentSideNav == ''){
			$('#'+clickedID+'-ddcontent').toggle('fast');
			$('#'+id).toggleClass('active');
		}
		else{
			$('#'+currentID+'-ddcontent').toggle('fast');
			$('#'+clickedID+'-ddcontent').toggle('fast');
			$('#'+currentSideNav).toggleClass('active');
			$('#'+id).toggleClass('active');
		}
		currentSideNav = id;
	}
}

Open in new window