Accordion Menu Apple style - variation 2

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


  • Level 2 menus are now preceded by a star.
  • Level 2 menus are now in Times New Roman italics.

Sample Code

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_v2.css}

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

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

<a href="">Test3</a>
- <a href="/php-gtk2/test31.html">test3.1</a>
- <a href="/php-gtk2/test32.html">test3.2</a>
- <a href="/php-gtk2/test33.html">test3.3</a>


The CSS file

The css file of this variation "AccordionMenuApplestyle_v2.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

  • Precede level 2 menus by a star.
  • padding-left: 21px;
    background: url({$base}/star-1.png) 4px 0px 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 star-1.png, I used 21px. 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.

  • Level 2 menus are now in Times New Roman italics.
  • font-family: "Times New Roman", Times, serif;
    font-style: italic;

About the Predefined Variables

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.

Putting the menu in a module position

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.