Website Vertical Menu Design

• Status: Closed
• Prize: $80
• Entries Received: 4
• Winner: creativemz2004

Winner

Contest Brief

I need someone with good design skills and knowledge of CSS.

My website started with a single list of items as a menu. As I have developed the site, I have made unplanned improvements. First, I created a second layer for the menu and later on, I made a third dropdown layer.

I am not as keen on how this menu looks as I have moved further and further away from the original design I had made up.

The current menu I have created as the project has expanded is on the left-hand side of evilsaint.com, and you can see the old menu in place there now.

I have re-wrote the backend functions to output new HTML (not showing in the menu but on the below sample links).

This HTML is capable of supporting up to 4 depths. However, I am not currently using 4 depths (my thought behind adding a 4th was for future-proofing). Maybe 3 depths are the limit while still keeping the design looking good. If so, I can easily remove 4th depth.

Examples of the new menu HTML are here:
Existing website: evilsaint.com

The HTML output of my newly designed menu.
* https://evilsaint.com/static/freelancer/menu.txt
* https://evilsaint.com/static/freelancer/menu.html

The new output has been designed to support various styling and hooking. The current menu is using Jquery. I will accept entries with Jquery, but if possible would like a pure CSS solution.

My models on the backend generate HTML, so I need the CSS/Javascript to add to the site. Feel free to embed the menu design in my current evilsaint template to be judged on looks.

BELOW THIS LINE IS JUST ME EXPLAINING SOME OF THE CSS CLASSES I ADDED. 95% OF YOU WILL BE BE ABLE TO SEE FROM THE SAMPLES ABOVE.
===================================================


Some things worth noting

* The depth of the nested UL blocks are marked with a class that state `level_1`, `level_2` etc. etc
* All the nested LI elements are named `category-listitem` and then have a `tier-1`, `tier-2` etc. etc
* If an LI element has no children and thus no need to expand to show anything below it, it is given a "no-children" class.
* An anchor elements are named with the class `category-linkitem` and then have a `tier-1`, `tier-2` etc. etc
* The current selected page marks the current anchor as "current_page" e.g. look at configuration reviews in the example "current_page" >Configuration Reviews</a>"

```
<li class="category-listitem tier-3 no-children"><a href="/category/cloud/amazon-web-services/amazon-relational-database-service-rds/" title="Category: Amazon Relational Database Service (RDS)" id="category-link-102" class="category-linkitem tier-3 current_page" >Amazon Relational Database Service (RDS)</a></li>
```

Recommended Skills

• CSS
• Website Design