Menu Navigation

Screen Shot 2015-06-07 at 12.14.07 PM.png

Dropdown Menus

          Figure 1. Navigation

To get submenus from the main menu, you just need to make a folder.
The folder will show up on the main menu.
All the items inside the folder will show inside the dropdown submenu.
As you can see in the example, the folder 'OUR WORK' shows up in the main menu.


Linking the Dropdown Menu

Goal: Have all the information on 'OUR WORK' show up on one page, but have the dropdown submenus link to a specific sections on that one page.

Problem: Some templates (like Shift) allow you to combine multiple pages onto one index page by just stacking the pages. However, in Montauk, index pages only show thumbnails. (The page thumbnails correspond to the page banner image).  

Solution: Create anchor tag links to jump to the appropriate place on one page.

Figure 2. 'Code Block' in step 2

Figure 3. Code block from step 3

Figure 4. Naming 'external link' inside submenu

  1.  Above the page heading you want to link to, place a "code block". It has to be above the heading because the screen will jump to the code block. You want  to jump to the space above the heading.
     
  2. Inside the code block, place:
    <div id = "blah"></div>
                      OR
    <span id = "blah"></span>
    where 'blah' is some arbitrary word. It can be whatever you want it to be... Just make sure that it's distinct. There shouldn't be another id with the same name on that page.

  3.  Go back to the menu. Add a 'link' to the menu. Make sure it is an 'external link'. Inside paste the url of the first page, followed by '#blah' or whatever you decided to name your id. In this case the url of the first page was "www.gotakeroot.com/our-approach" and the id was 'clients' so we appended '#clients'. The hashtag is called an 'anchor tag'.  Look at Figure 4 for the final result.
     
  4. That's pretty much it! The side navigation menu should look like Figure 1. There should be a folder, and nested inside the folder should be a series of links. 

*Note: Click on the pictures if they're too small to see. They'll pop up and be slightly bigger.