View Full Version : Accordion menu with rounded corners

05-05-2011, 03:12 AM
1) Script Title: Apple style Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

3) Describe problem: Hello all,
I was looking to have the menu with rounded corners instead of square, is this possible?

Couldn't find any info searching, I am new to scripts so I don't know where to start.
Your help is appreciated, thanks :)

05-06-2011, 05:07 PM
You can use CSS3's border-radius (http://www.dynamicdrive.com/style/csslibrary/item/css3_rounded_corners_using_border_radius/) property to apply round corners to hard edges of an element, such as to the four corners of each menu link within the menu. The following modifies the default CSS of the menu to do just that:

.submenu{display: none}
a.hiddenajaxlink{display: none}

margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/

.applemenu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
-moz-border-radius: 5px;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/

05-10-2011, 01:50 AM
Thanks Admin, managed to get it sorted looking through http://www.dynamicdrive.com/style/csslibrary/item/css3_rounded_corners_using_border_radius/