To install Tophat simply visit the Github page and click the 'Download source' button at the top right-hand corner of the page, download the zip file and then extract it in your site's root directory. All you need to do now is setup your menu and you're done!
To setup the menu system follow these steps:
Setup your menu HTML like so
<ul class="tophat_menu horizontal"> <li class="no_submenu"><a href="/">Home</a></li> <li class="has_submenu"><span>Categories</span> <ul class="is_submenu"> <li><a href="/cat/1">Category 1</a></li> <li><a href="/cat/2">Category 1</a></li> <li><a href="/cat/3">Category 1</a></li> </ul> </li> <li class="no_submenu"><a href="/logout">Logout</a></li> </ul>
Note: You can also setup vertical menus using the 'vertical' class like so:
<ul class="tophat_menu vertical"> ... </ul>
To match the look and feel of your new menu to the rest of your project you will need to change the 'tophat-menu.css' stylesheet. The stylesheet that is provided can be used as-is or can be used as a template for your final look.
If you need more info, or have an issue to report please contact me at: firstname.lastname@example.org
Author & Credits