Constructing the Main Menu and using JavaScript

In the time since I last posted, I've updated the menu into a megamenu. Instead of using the default Orchard menu, I chose to use an HTML menu item and created an HTML table to format the megamenu. The first level of the menu was formatted using CSS and the hover method, which added the orange top border with the mouse hover. The second-level megamenu was formatted using a gray-to-white image gradient repeated horizontally.

I also created the custom content type called products, which went with another custom content type called product features. The product features (the benefits, features, implementation, etc) would fit into a product (Nexsure Easy, Element, Express, Enterprise, etc). This was done through CodeGen, in order to create the Orchard structure files (bin, src, etc) and then with Visual Studio to code the models, drivers, etc. The Orchard Documentation goes through this in detail, which offered a good walkthrough.

JavaScript turned out to be easier than I expected. The actual JS code was maybe 30 or so characters. The main issue was formatting the content so the JS could turn them into tabs. Each tab would represent a Product Feature of a Product. I had to work with a text field in order to customize what tab name I wanted to use, else it would default to using the Product Feature name.