As a solutions consultant for Zendesk for several years I skinned Help Centers many times as proof of concepts on larger deals.
The CSS and HTML to make this happen looks reasonably straight forward. However, this implementation will require some javascript coding and a little bit of magic.
1. In the pdf you supplied, you're displaying 4 levels of the Help Center, when Zendesk only has 3: Categories, Sections and Articles.
Eg. In your case it would look like this:
Knowledge Base = Category
Basic Articles = Section
Tasks = ?
IR Ques on tasks & tracking changes to objects = Article
In order to insert the 4th level, javascript will need to be written to insert that level. Note that when Zendesk renders the Help Center, it passes the javascript after the page has fully loaded so this level will appear about a third of a second after everything else. I would recommend confining your requirements to 3 levels, however I imagine the support guys @ Zendesk have already told you this which is why you're here ;-).
2. When someone clicks on "Support" they're essentially going into a category. However Categories aren't shown to end-user if they don't contain a KB article they have permission to see. So a token article will need to be created and hidden in order to just display the 3 buttons: " Submit a Ticket" "View Tickets" & " Contact Support".
Please contact me on +61425769114 if you have any questions or concerns.
I look forward to working on this :-)