This is variation 1 of the Accordion Menu Apple style by changing the css file.

The menu you see on the top right is produced with the sample code below. You can just copy and paste the following into your content item to try out this variation. All the required files (the css file and the png files) come with the standard installation of this plugin.

{Accordion_Menu_Apple_style 100 float:right16 css:AccordionMenuApplestyle_v1.css}

Test1
- <a href="test11.html">test1.1</a>
- <a href="test12.html">test1.2</a>
- <a href="test13.html">test1.3</a>
- <a href="test14.html">test1.4</a>

Test2
- <a href="test21.html">test2.1</a>
- <a href="test22.html">test2.2</a>

<a href="http://www.kksou.com">Test3</a>
- <a href="test31.html">test3.1</a>
- <a href="test32.html">test3.2</a>
- <a href="test33.html">test3.3</a>

{/Accordion_Menu_Apple_style} 

The css file of this variation "AccordionMenuApplestyle_v1.css" is located in the folder:

• Joomla 1.0: mambots/content/ddaccordion/
• Joomla 1.5: plugins/content/ddaccordion/AccordionMenuApplestyle_v1.css

I would suggest you compare this with the original css file "AccordionMenuApplestyle.css" to see how the effect is achieved

Key changes

• No colored background bar for level 1 menus. Simply comment the following lines:

/*background: black url({$base}/silvergradient.gif) repeat-x center left;*/

and

/*background-image: url({$base}/silvergradientover.gif);*/

• Precede level 1 menus by a triangle.

padding-left: 20px;
background: url({$base}/triangle-1.png) 6px 8px no-repeat;

Note that some amount of padding will be required so that there's a gap between your image and the text. For this image triangle-1.png, I used 20px. For your own image, you might need to adjust this value.

Note also that if you're going to use your own image for the bullets of level 1 or level 2 menu items, you need to dump them in the folder mambots/content/ddaccordion for Joomla 1.0, and plugins/content/ddaccordion for Joomla 1.5.

As highlighted in the comment areas of the css file, there are some pre-defined variables in the css file. You need to enclose them in curly brackets.

1. $menu_width: this is the width of the menu. This is the width you have defined in the parameter of the plugin.
2. $menu_height: this is the height of the menu. This is the height you have defined in the parameter of the plugin.
3. $base: this is the url base to the background image for the menu. If you want to change the two background images, make sure you prepend this $base to the image so that the image can be found.

You can also put the menu in a module position with the use of the Accordion Menu Apple style module .

You can see a live demo here.

There are no user reviews yet.

Note: You have to be a registered member to leave a comment. Free registration here.