4. Styling the Tablet and Desktop Menu

In this tutorial I will walk you through how to build an Apple style menu and sub menu for your DNN theme.

We will take a mobile-first approach to building this smart, responsive menu, and I’ll demonstrate how to employ jQuery to apply the various effects such as the sticky sub menu, and the slide down mobile menu.

This tutorial is aimed at intermediate level DNN theme developers, and you should know how to access your DNN file system inside a code editor and be able to understand the basics of CSS and HTML syntax.

This video contains:

• Hiding the various elements in tablet view
• How to style the main menu for desktop
• How to style the sub menu for desktop
• Floating the sub menu items right
• Sticking the sub menu to the top of the page with jQuery
• How to swap icons based on menu status