Website Vertical Menu Design

  • Status: Closed
  • Hadiah: $80
  • Penyertaan diterima: 4
  • Pemenang: creativemz2004

Ringkasan Peraduan

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

Kemahiran Disyorkan

Maklum balas Majikan

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

Gambar Profil GeekThePlanet, United Kingdom.

Penyertaan teratas dari peraduan ini

Lihat Lebih Banyak Entri

Papan Penjelasan Umum

  • johnluisWeb
    johnluisWeb
    • 2 bulan yang lalu

    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 bulan yang lalu
  • harpalsinh88
    harpalsinh88
    • 2 bulan yang lalu

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

    • 2 bulan yang lalu

Bagaimana untuk mulakan dengan peraduan

  • Siarkan peraduan anda

    Siarkan Peraduan Anda Cepat dan mudah

  • Dapatkan berjuta penyertaan

    Dapatkan Bertan-tan Penyertaan Dari serata dunia

  • Anugerahkan penyertaan terbaik

    Anugerahkan penyertaan terbaik Muat turun fail-fail - Mudah!

Siarkan Peraduan Sekarang atau Sertai kami Hari Ini!