One of the most important parts of a website is the navigation menu. The navigation menu is like the roadmap the user must follow in order to reach their destination. Make the journey any lengthier than necessary, and chances are the user will get tired and bounce. With good reason, it’s a no brainer that people like everything fast. Therefore, a good navigation must be organized and concise for optimal user experience.
One of Responsive Site Designer's greatest new features is the kickin' Components Library that's comprised of several pre-made components, ready to be added to your project. This includes numerous types of navigation menus, all freely customizable and at your disposal.
You can choose to use a menu from the selection above, or if you're really crazy, create your own component from scratch (Learn more here). For those who have several links but don’t want to crowd up the navigation bar, you’re in luck. In this tutorial we will go over how to create nested menus, so that your website can look stylish and better organized!
Before we get started...
In this tutorial, we will be using the Foundation framework and its attributes to create responsive nested dropdowns. It is highly recommended that you have the documentation close at hand. Otherwise, it is more likely to get confusing! If there are more attributes you wish to add, use the doc so that you can learn about the attribute, follow along with the code and apply it to RSD. Good luck!
Create Your Navigation Bar
Begin with your slider to the left of the first breakpoint. Drag and drop a Container to your first column (or for the sake of semantics, use a Container Nav). Add a Text Link and a Font Icon Link, which can be found under the drop-down selector for Font Icon. The elements should at first appear stacked.
To modify this current layout and place them inline, under the container’s Design pane, go to the Position section and change the Display to Flex. To have both elements at opposite ends, under Justify select Space Between. Now it’s starting to take better shape. Let’s modify the text link to make it more appealing. Give the text link a class name and add your styles. I increased the font size to 20px and under Flexbox, changed the alignment to Center. But you can style them however you want, more power to you!
We’re done with the navigation bar (for now). Next up is when the fun part begins. Time to add some menu links!
Add Your Links
First select the column, then in the Elements pane, drop a second Container to the column. This will allow us to manipulate its contents without affecting the navigation bar. Give it a unique ID name (like
sub-nav); we will use it later on. Add a List Container, this is the equivalent of the
<ul> element in HTML, they have just been placed in their respective container. You can modify how many list (
<li>) elements you want by going to the Design pane. To add your links, drag and drop Text Link into their respective section.
Attribute it Up!
Ultimately what we want is a navigation menu that works well on mobile and desktops. For mobile, an accordion-style menu is usually what works best. For higher resolutions, we can switch that over to a dropdown menu.
What the heck are attributes?
From here on, for better practice, we will begin following the code provided for us in Foundation’s docs.
Locate the List Container. An easier way to do this is by going on the Inspector pane and selecting it from there. Mouse over the element name to see it highlighted in the live preview. From there, you can see you have the
<ul> element selected. Good! According to the code, that is the one we should start with!
Double click on the element to open up the Design pane. Give it the
menu classes. The vertical class will align the menu vertically, beginning on the smallest screen. The medium-horizontal class changes the orientation to horizontal once it reaches a medium size, or breakpoint. The menu class is there to turn it into a flexible component for navigation.
After applying the classes, drag your slider to the right and see how your menu changes!
It’s time to add a dash of fun to our navigation! Under Attributes, select Data Responsive Menu, and add the value
medium-dropdown. As a default, we would have an accordion menu. From medium screens and up, our menus would turn into a dropdown.
With this, we have translated the first line of code into RSD! Let’s keep going!
We’re not done with attributes yet. We still need to make it so that clicking on our hamburger icon triggers the script to allow the menu to appear, along with making the navigation bar disappear entirely on larger screens. To make this happen, select the container where your navigation bar is located and add the Data Responsive Toggle attribute. Afterward, select your hamburger element and give it the Data Toggle attribute. For both of the attributes, make the value equal to the ID you gave for the second container. To witness this transformation, preview it on your browser. So cool!
We’re almost done! How about adding some nested links?
Organization is important for optimal user experience. In order to prevent the user from clicking on a link and searching the entire page for the subject they want, you can categorize it under its appropriate link. We want to put a bit more info under ‘Services’. Select the link’s List Item Container and under Elements, drag and drop a List Container, along with however many Text Links you desire. Remember, you can make sure it’s in the correct order by opening the Inspect Pane and observing the corresponding HTML tags.
Give your new List Container element the
menu classes. They are now on par with the rest of the links, only nested. But what if we want to nest it one more time? No problemo, go back to the elements pane and drop a UL Link to your List Item Container. Make sure your
<ul> elements have the vertical and menu classes!
Check out the browser preview to see the magic come to life…..
...and there you have it! Feel free to tinker with your new menu in order to reach the end result you want.
If you want your site title to stay, one solution would be to split the column into two, replicate your title design, and use the Display: None feature to make it only appear at certain breakpoints. Change the span width of your original column to
12 when the title is hidden so that your menu can return to its starting position.
There is a small issue that occurs whenever you try to customize an element that has a foundation attribute (our menu in this case). The style will appear and then when hovering over it will switch to Foundation's default colors (white and blue) When this happens, the solution would be to apply another class with the exact same styles to override the default.