Create a multi-level accordion menu using only HTML and CSS.

While I use a Raspberry Pi for my projects, this can run on any web server.

Instead of providing examples of how to create a particular web element, the goal is to have a template that includes working examples of each element used in my projects. It is easier to modify something that works, then trying to get it to work.

An accordion menu can be used as an interface to a Raspberry Pi device via a computer, pad or mobile phone. While I use a Raspberry Pi running lighttpd, any hardware and web server can be used.

Every Raspberry Pi project should have an interface. Because of its relatively small display size, mobile phones are the most restrictive. An accordion menu gets around a phone's limits by expanding (+) and collapsing (-) vertically allowing as many menu items as required.

There are many examples of accordion menus on the web. Because I like the look-and-feel of OpenHAB or OpenSprinkler, I wanted something similar.

Up until now, my Raspberry Pi project's menus have been very simple. I didn't spend a lot of time on the look-and-feel. Most of my interfaces were written only in HTML and used no CSS. I am not a UI designer and working on look-and-feel is outside of my comfort zone. Because I don't work on websites very often, I've learned and forgotten CSS multiple times. I wanted to do the menu look-and-feel once, get it right, and then reuse it.

In my applications, I need the menu to support:

links to other websites or devices,
display values or status and
allow updates to values.

The last two require more than HTML and CSS.

Since I don't know in advance, how many menu items I will need, an accordion menu allows the flexibility to expand the menu as required.

My comments in the CSS and HTML may be a bit over the top, but I can look at the comments and know how to change the menu to meet my needs without re-learning CSS. The comments also make it easy for me to understand how the CSS impacts the HTML without flipping back-and-forth between the two.

I had a few other requirements:

Sometimes my house loses internet access. So, I cannot have the menu system depend on links to external websites, which includes external fonts, APIs or javascript
My family has eclectic computer tastes and uses iPhone, android, MACs, PC and iPads, tablets, as well as, chrome, firefox, safari and IE. The menu needs to run on all of these

I spent a couple of weeks trying out various accordion menu implementations. Editing them, adapting them and giving up on them. The website, CSS Scripts, has a multi-level menu that met all of my requirements and forms the basis of this instructable.

Step 1: Step-by-Step Install

Open terminal window on a MacBook or PC and run the following commands:

Replace items in ♣'s with actual values.

$ ssh pi@♣raspberry-pi-ip-address♣

Change to main directory

$ cd /var/www

Download index.html, and change permissions and owner of the file

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"
$ sudo chmod 774 index.html
$ sudo chown pi index.html

Make a directory for images and move into that directory

$ mkdir img
$ cd img

Download the images and change the owner.

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"
$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png"
$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/raspberry-pi.png"
$ sudo chown pi *.png

Backup to the main directory, and create the css directory and move into it

$ cd ..
$ mkdir css
$ cd css

Download the style sheet, and change permissions and owner of the file

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"
$ sudo chmod 744 style.css
$ sudo chown pi style.css

If you don't have a raspberry pi, then you can download these files to a Mac or PC. To run the menu from a Mac or PC, either

double click on index.html, or
select index.html, right click, and open with the browser of your choice.

If using a Raspberry Pi, it must be running a web server. Open a browser on your PC or Mac, and in the URL window enter:

♣raspberry-pi-ip-address♣/index.html

My server requires a secure connection (remove spaces around the colon):

https : //♣raspberry-pi-ip-address♣/index.html

And it works!

Step 2: Appendix: References

Step 3: Appendix: Updates

Step 4: Appendix: Troubleshooting

Here are some ideas that might help:

To format HTML in php echo statements, add "\r" at the end to put in a return character
The group-id for a sub-menu must be unique. If a sub-menu's group-id is not unique then its sub-menu items will be included in first instance of group-id