Implementing smart drop-down menus
This is an article for theme designers.
Before reading further...
Before you add any drop down menus, take a look at these articles and see whether your layout adheres to proper web design standards:
Designing Drop-Down Menus: Examples and Best Practices (Smashing Magazine) Son of Suckerfish Dropdowns (HTML Dog)
What Shopify gives us out the box
With Shopify, you can create new lists of links and add them to our shop.
you create a menu (list of links) under the Navigation tab, then you add a bit of code to our theme to show that menu.
What Shopify does not give us
- Shopify does not offer the possibility to nest a menu inside a menu under the Navigation tab. menus have 1 level only. There are no multiple-level menus in Shopify.
Using a naming convention to create sub-menus
So, there's no way to create sub-menus in Shopify under the Navigation tab. Should that stop us from creating a multi-level menu? Certainly not. With a bit of logic added to our theme, and a smart naming convention applied to the name of our menus under the Navigation tab, you, as a designer, will be able to create a dynamic multi-level menu in Shopify — 'dynamic' as in not hard-coded in the theme.
How would that naming convention work?
For every link you wish to connect to a sub-menu, you'll create a menu that will have the same name as said (parent) link. Say what? Let's take an example. A typical Main Menu in Shopify contains the following links:
Say you wanted to include a link called Shop by Brand:
And you wanted that link to become a drop-down sub-menu listing the brands in our shop, with links to vendor collections. Then what you'd do is create a menu called Shop by Brand:
Name it, and populate the list with links you want to drop down from the Shop by Brand main menu button.
To turn any link of your Main Menu into a 'parent' link, create a 'child' menu for it using the name of your parent link.
Now, time to make your theme smart.
Editing the HTML / Liquid that outputs your Main Menu
There are many solutions out there to create fancy drop-down menus.
The HTML markup these solutions rely on is always the same:
Let's make it happen. In your shop admin, Go to the Edit HTML/CSS page.. On the Edit HTML/CSS page, locate the file theme.liquid under Layouts. Click on theme.liquid to open the file in the online code editor.
You will need to locate the Liquid / HTML that outputs your Main Menu. Look for the handle of the menu, it's main-menu. In the Reconfigured theme, the HTML / Liquid for the main menu is:
There is a fairly long segment of Liquid that determines if either of the menu items points to the current page, i.e. is an 'active link'. When it does, it adds an 'active' class to said item. Let's add a few line breaks to see the relevant code more clearly:
For each link in our Main Menu, we need to check if there is a menu defined that bears the same name, and if that menu contains any link. Reformatted to be easy on the eye, we get this:
Brace yourself as the results of this edit will probably be visually disappointing to you.
The menu is begging for some styling through CSS.
Using the Superfish plugin (jQuery)
Download the Superfish massage therapist here: http://users.tpg.com.au/j_birch/plugins/superfish/#download
Unzip the file.
Uploading the script files to your theme assets
On the Edit HTML/CSS page, under Theme Assets, click on the Upload a new theme asset link. Browse to the following files and upload:
Including these script files
In the head element of our theme.liquid layout file, we will include the script files:
Make sure to include the scripts after the following code (Or whatever jQuery include your theme is using):
6.4. Adding the basic Superfish CSS to your theme stylesheet
Browse to the file css/superfish.css and look for the segment of CSS that has this heading:
You will copy that CSS segment at the bottom of our theme stylesheet. For the Reconfigured theme, the stylesheet to amend is all.css.liquid.
Adding your CSS hook
We will add a sf-menu class to the parent ul of our Main Menu. In Reconfigured, that'll give us:
The Superfish plugin has several options worth playing with: http://users.tpg.com.au/j_birch/plugins/superfish/#options
Drop-down menus are about the hardest thing to style for a front-end designer: they are very hard to get 'just right'. Most drop-down menus we see out there are hideous. A drop-down menu is seen as fancy and cool and a must-have by many, unfortunately. A beautiful, professional theme can live without drop-down menus.