The menu consists of four columns of links, one for each level in the menu hierarchy. In Site Designer you will see them all because of the overflow setting 'visible'. On a web page the overflow has been changed to 'hidden'. This styling change can be found on the Element pane, in the box for Head code.
The triangles can be found in the Windows 'charmap' in the 'Wingdings3' character set. The Mac version of the 'charmap' can be found by clicking on Cmd+Ctrl+Space bar.
The second component is the same, but it has been made so that the different levels scroll into view when they are clicked on. This has been achieved with a small java script and some other small changes, all found on the Element pane.
The menu is designed to sit along the left side of a web page. If you want to move it, the best way is to add a container around it, as has been done here with the .drilldown-wrapper, and then put margins and padding in place as you see fit. Also, the outer container has been been centered on this page. If you don't want that, just remove the left and right 'auto' margins.
You can add or subtract menu links or levels. You can also change the styling as you prefer. Since all the links have the same class name, an extra class name has been added to be able to give the back links a different colour.
Download this component (displayed)
Download the component with smooth scroll
Both components can be used both for 'mobile-up' and 'desktop-down'.
Drilldown Menu
The menu consists of four columns of links, one for each level in the menu hierarchy. In Site Designer you will see them all because of the overflow setting 'visible'. On a web page the overflow has been changed to 'hidden'. This styling change can be found on the Element pane, in the box for Head code.
The triangles can be found in the Windows 'charmap' in the 'Wingdings3' character set. The Mac version of the 'charmap' can be found by clicking on Cmd+Ctrl+Space bar.
The second component is the same, but it has been made so that the different levels scroll into view when they are clicked on. This has been achieved with a small java script and some other small changes, all found on the Element pane.
The menu is designed to sit along the left side of a web page. If you want to move it, the best way is to add a container around it, as has been done here with the .drilldown-wrapper, and then put margins and padding in place as you see fit. Also, the outer container has been been centered on this page. If you don't want that, just remove the left and right 'auto' margins.
You can add or subtract menu links or levels. You can also change the styling as you prefer. Since all the links have the same class name, an extra class name has been added to be able to give the back links a different colour.
Download this component (displayed)
Download the component with smooth scroll
Both components can be used both for 'mobile-up' and 'desktop-down'.