Website Vertical Menu Design

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

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

Employer Feedback

“I use Mohammad for my web projects as he delivers quality work each time. This will not be the last time we work together!”

Profile image GeekThePlanet, United Kingdom.

Top entries from this contest

View More Entries

Public Clarification Board

  • johnluisWeb
    johnluisWeb
    • 1 month ago

    Hi CH, What I understand from your description is that you want a modern vertical menu with mentioned output, right? If yes tell me to start working.

    • 1 month ago
  • harpalsinh88
    harpalsinh88
    • 1 month ago

    can i make my own html code coz your is little bit confusing.

    • 1 month ago

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!