This document discusses a new menu platform called Menu Box that allows for pure CSS skinning of menus in DotNetNuke. Menu Box separates the menu from the rest of the skin so it can be customized independently. It also introduces Menu Factory, an online menu theme builder that allows designers to create menu themes without coding. The document outlines the key concepts of Menu Box, including how a menu theme has an HTML structure, CSS presentation, JavaScript behavior, and a manifest file. It provides examples of how to define these parts and package a custom menu theme.

1. Pure CSS skinning with Menu Box and Menu Factory Mikita Mikado Serge Barysiuk 6

3. UI Design

5. RIA Development

6. Application Architecture2

7. Agenda A new menu platform concept Menu Box how it is A menu theme under the hood and how to create your own Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 3

8. DotNetNuke design concept Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 4 Ability to install a new design with no coding Separation between CMS and site design Design is page-specific Control design of every element of the site with skins and containers

9. What are the parts of the skin? Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 5 Navigation Layout Containers

10. DotNetNuke skin parts Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 6 + + Containers Navigation Skins

11. DotNetNuke skin parts Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 7 Skins & Containers are reusable. Navigation is a part of the skin.

12. What if we would have… Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 8 + + Containers Navigation Skins

13. … it would be handy. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 9 … and we decided to go custom. Why?!

14. Problems with existing solutions DNN navigation is time consuming to skin; DNN Navigation is not SEO friendly, not optimized and not flexible; Third party modules are too developer-centric and not-easy to integrate and create a theme. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 10

15. 5 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 11 5 the most important ideas behind the platform.

16. 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 12 1 Menu is a separate part of the skin.

17. 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 13 2 Menu theme could be shared and easily installed without a need to be a programmer.

18. 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 14 3 High extensibility in terms of structure, presentation and behavior.

19. 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 15 4 Easy themes creation reusing thousands of scripts and menus across the web.

20. 5 ideas behind the platform Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 16 5 … and finally an open platform to build state of the art menus.

21. Meet Menu Box Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 17

22. Menu Box Motto Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 18 There are no limitations but your own imagination.

23. Menu Box Concept Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 19 Themes Box Put themes into the box.

24. Using the module as… Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 20 DNN Module Skins Object

25. Installing a theme Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 21

26. Using the module for… … main DNN navigation. … sub navigation for inner pages. … site map. … page index. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 22

27. Menu Theme 23 Menu theme under the hood

28. What is a theme? Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 24 + + = Menu Theme Structure (HTML) Presentation (CSS) Behavior (JS)

29. What is a theme? Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 25 Structure (HTML) How theme is rendered. Presentation (CSS) How theme looks like. Behavior (JS) How theme acts.

30. What is a theme? Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 26 css html images js CSS files used for the theme HTML templates to render structure Images used in the theme JavaScript libraries used in the theme skin.xml Theme manifest file

31. Menu theme manifest Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 27 Manifest file connects all them together. Structure (HTML) Presentation (CSS) Theme Manifest (skin.xml) Behavior (JS)

32. Menu theme manifest (skin.xml) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 28 Theme name and additional information HTML templates declaration = JavaScript files and inline scripts declaration Theme Manifest (skin.xml) CSS files declaration

33. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 29 0 Theme meta info

34. Menu theme manifest (skin.xml) <?xml version="1.0" encoding="utf-8"?> <skin> <skin_id>AnimatedDropdownMenu</skin_id> <skin_image>skin_preview.png</skin_image> <template_name>Animated Dropdown Menu</template_name> <description>Drop down menus are a really convient way to fit a large menu into a really small initial space. This menu based on tutorial by www.clarklab.net. Note: This menu shows only top-level menu items.</description> <default>false</default> <version>1.0</version> ... </skin> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 30 General information about the theme

35. Menu themes management Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 31

36. Structure (HTML) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 32 1 Structure (HTML)

38. Easy understandableMikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 33

39. Structure (HTML) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 34 WrapperTemplate.ascx Wrapper Node (Level 1) NodeTemplate.ascx Node (Level 2) Node (Level 2) … Node (Level 1) Node (Level 2) Node (Level 2) … … Node (Level 1)

40. Structure (HTML) <divclass="<%= CssClass%>"id="<%= ClientContainerID %>"> <ulclass="topnav"> <asp:repeaterrunat="server"id="Menu"> <ItemTemplate> <uc:NodeItemrunat="server"Node="<%# Container.DataItem %>“/> </ItemTemplate> </asp:repeater> </ul> </div> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 35 WrapperTemplate.ascx

41. <liclass='<%=(IsActive ? "current" : "") %>'> <ahref="<%= Node.NavigateURL %>"><%= Node.Text %></a> <% if (HasChildren) {%> <ulclass="subnav"> <asp:PlaceHolderrunat="server"ID="phChildNodes"></asp:PlaceHolder> </ul> <%} %> </li> Structure (HTML) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 36 NodeTemplate.ascx Additional properties: IsLast, IsFirst, Level, Node.*

42. Registering renderer in manifest <?xmlversion="1.0"encoding="utf-8"?> <skin> ... <html> <renderer>html/WrapperTemplate.ascx</renderer> </html> ... </skin> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 37

43. Structure (HTML) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 38 Done!

44. Presentation (CSS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 39 2 Presentation (CSS)

46. No any specific about the module, just CSSMikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 40

47. Presentation (CSS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 41 css CSS files used for the theme styles.css theme.css … …

48. Presentation (CSS) <?xmlversion="1.0"encoding="utf-8"?> <skin> ... <css> <files> <file> <path>css/styles.css</path> </file> <file> <path>css/theme.css</path> </file> </files> </css> ... </skin> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 42

49. Presentation (CSS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 43 Done!

50. Behavior (JS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 44 3 Behavior (JS)

52. Inline scripts supportMikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 45

53. Behavior (JS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 46 js JS scripts used for the theme jquery.myplugin.js jquery.hoverIntent.js … …

54. Behavior (JS) <?xmlversion="1.0"encoding="utf-8"?> <skin> ... <js> ... <files> <file> <path>js/jquery.myplugin.js</path> </file> <file> <path>js/jquery.hoverIntetn.js</path> </file> </files> </js> ... </skin> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 47

55. Behavior (JS) <?xmlversion="1.0"encoding="utf-8"?> <skin> ... <js> <startup_scripts> <script> <data><![CDATA[ $(function(){ $("#{container_id}").myplugin(); }); ]]></data> </script> </startup_scripts> <files>...</files> </js> ... </skin> Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 48 Startup scripts is a general way to initialize your menu

56. Behavior (JS) Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 49 Done!

57. What we got so far… Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 50 Structure (HTML) Presentation (CSS) Behavior (JS) Theme Manifest (skin.xml)

58. Let’s pack them together Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 51 css html images js MyTheme MyTheme.zip skin.xml

59. Custom Menu Theme Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 52 Finish!

60. Developers only? Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 53 But… what if I’m a designer, not a developer? Can I still use it?

61. Good news for you! Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 54 Menu Factory - Online menu theme builder.

62. Menu Factory service Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 55

63. Menu Factory service Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 56 http://factory.codingstaff.com

64. More sugar Localization support Apollo Localization Ealo Localization components Adequation Localization Extensions LocoponDSLocalizator Conditional comments (for scripts, styles) Side navigation mode A set of built themes Good documentation to get started Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 57

65. … and even more Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 58 It’s free and it’s going to be open sourced!

66. More information http://www.codingstaff.com http://www.codingstaff.com/blog http://factory.codingstaff.com http://twitter.com/codingstaff Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 59

67. Mikita Mikado and Serge Barysiuk: Pure CSS skinningwith Menu Box and Menu Factory 60 Thank you!