Website Vertical Menu Design
- Status: Closed
- Hadiah: $80
- Penyertaan diterima: 4
- Pemenang: creativemz2004
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.
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.
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>
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!”
GeekThePlanet, United Kingdom.