Website Vertical Menu Design

  • Durum: Closed
  • Ödül: $80
  • Alınan Girdiler: 4
  • Kazanan: creativemz2004

Yarışma Özeti

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>
```

Aranan Beceriler

İşveren Geribildirimi

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

Profil Görüntüsü GeekThePlanet, United Kingdom.

Genel Açıklama Panosu

  • johnluisWeb
    johnluisWeb
    • 2 ay önce

    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.

    • 2 ay önce
  • harpalsinh88
    harpalsinh88
    • 2 ay önce

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

    • 2 ay önce

Yarışmalara nasıl başlanır

  • Projenizi ilan edin

    Yarışmanızı İlan Edin Hızlı ve kolay

  • Tonlarca girdi alın

    Tonlarca Girdi Alın Bütün dünyadan

  • En iyi girdiyi seçin

    En iyi girdiyi seçin Dosyaları indirin - Kolay!

Şimdi bir Yarışma İlan Et ya da Bugün Bize Katılın!