Here is the question:

In Sitecore, how would you organize architecture and static files – mainly CSS and javascript files – during development of the following two levels menu?

The first level shows an Image and a Title and starts closed:

When the user hovers a block at Level 1, a second part is displayed showing items on Level 2:

Answer

Your static CSS and Javascript files, like in any other web application, must be loaded somehow. At the project we are working, we have a bundle and minification process in place, responsible for loading, minify’ing and caching the files so everything loads faster.

But you can load files the old way:

<script src="myscript.js" type="text/javascript"></script>

The implementation itself can be split into two different challenges:

1. Front-end development
   We clearly have a good front-end work here, some dynamic behavior when user hovers around level 1, the look and feel and everything. Basically all HTML markup, javascript and css stylesheets can be prepared without having Sitecore specifically in mind;
2. Back end development
   All necessary to enable the content edition of menu items, and make it work dynamically at a page, including:
   • Step 1 - Upload your javascript and CSS files somewhere at your site filesystem (Eg: “/assets/js” and “/assets/css“), then load them somehow (traditional, bundle, etc);
   • Step 2 - Define your data structure (templates and fields) to support the content management. It all depends on your requirements – let’s have the following two possible scenarios:
     • Scenario 1 - You may want to feed the menu with pages and subpages you already have in your content tree. In this case you would just use your existing data:
       
     • Scenario 2 - Or you may be asked to create a dedicated data structure, not pages themselves but pointing to real pages. This data structure would have the following format:
       Menu Item Level 1
       Menu Item Level 2
       And you would keep the item somewhere outside your page’s content tree:
       
   • Step 3 - Create the component/sublayout that implements the menu feature. Following the same two scenarios above:
     • Scenario 1 - In this case you would use the Sitecore API to pragmatically get the Home item, using Children items to render menu’s level 1, and their grandchildren rendering level 2:

       var homeItem = Sitecore.Context.Database.GetItem("/sitecore/content/Home");
       var levelOne = homeItem.Children.ToList();
       foreach (var itemLevelOne in levelOne) {
          // This item represents a Level 1 menu block
          var title = itemLevelOne.Fields["Title"].Value;
          var image = itemLevelOne.Fields["Image"].Value;
          var levelTwo = itemLevelOne.Children.ToList();
          // ... do whatever you need with Level 1
          foreach (var itemLevelTwo in levelTwo) {
             // Here you work your Level 2 item
             var titleLevelTwo = itemLevelTwo.Fields["Title"].Value;
          }
       }

     • Scenario 2 - This implementation would be very similar to the first scenario, except that you would have to start at your repository folder (Eg: /sitecore/content/Lists/Menu) instead of the Home item.